--- title: "Kachelfarben in Smart Tiles: Akzentfarben des Designs und vordefinierte Farben" description: "Die Hintergrund- und Schriftfarben, die für Kacheln im Vitextra Smart Tiles Webpart verfügbar sind: die sechs Akzentfarben, die dem Websitedesign folgen, die Palette aus 31 vordefinierten Fluent-UI-Farben, Schwarz und Weiß – mit den genauen Werten, dem Verhalten der Akzentfarben auf Websites, deren Design sie nicht definiert, und Empfehlungen zur Farbkombination." url: https://vitextra.com/de/support/kb/10043 language: de published: 2021-11-01 modified: 2026-10-10 products: - "Smart Tiles" author: "Līga Ozola" tags: ["Smart Tiles Farben", "Kachel Hintergrundfarbe", "Kachel Schriftfarbe", "SharePoint Design Akzentfarben", "Fluent UI Farbpalette", "ContentAccent Designslots", "SharePoint Kachelfarben", "dunkles Design Kacheln", "Vitextra Smart Tiles", "Intranet Navigation Farben"] --- # Kachelfarben in Smart Tiles: Akzentfarben des Designs und vordefinierte Farben Die Hintergrund- und Schriftfarben, die für Kacheln im Vitextra Smart Tiles Webpart verfügbar sind: die sechs Akzentfarben, die dem Websitedesign folgen, die Palette aus 31 vordefinierten Fluent-UI-Farben, Schwarz und Weiß – mit den genauen Werten, dem Verhalten der Akzentfarben auf Websites, deren Design sie nicht definiert, und Empfehlungen zur Farbkombination. ## Einführung Farbe ist der schnellste Weg, Kacheln zu gruppieren und ein Panel wie einen Teil der Website wirken zu lassen statt wie einen Zusatz. Jede Kachel in [Smart Tiles](https://vitextra.com/de/products/smart-tiles) hat eine **Hintergrundfarbe** und eine **Schriftfarbe**, beide aus derselben Palette gewählt: sechs Akzentfarben, die dem Design der Website folgen, einunddreißig vordefinierte Farben, Schwarz und Weiß. Dieser Artikel listet die Farben auf, erklärt das Verhalten der Akzentfarben und schlägt vor, wie sie sich kombinieren lassen. ## Eine Farbe auswählen 1. Öffnen Sie die Seite im Bearbeitungsmodus und klicken Sie auf die **…**-Schaltfläche der Kachel. 2. Zeigen Sie auf **Hintergrundfarbe** oder **Schriftfarbe**. 3. Klicken Sie im Untermenü auf eine Farbe. Jeder Eintrag zeigt einen Kreis in seiner Farbe; die aktuelle Farbe ist mit einem ausgefüllten Kontrollkästchen markiert. Die Änderung wird sofort übernommen. Beide Menüs enthalten dieselben Farben, sodass jede Farbe für den Hintergrund einer Kachel und den Text einer anderen verwendet werden kann. ![Das Menü Schriftfarbe](https://static.vitextra.com/articles/10043/font-color-menu-de.png) *Das Menü Schriftfarbe* Eine neue Kachel beginnt mit **Akzent 1** als Hintergrund und **Weiß** als Schriftfarbe. ## Akzentfarben **Akzent 1** bis **Akzent 6** sind keine festen Farben. Sie verweisen auf die sechs Inhaltsakzentfarben des auf die Website angewendeten Designs, sodass sich eine Kachel mit Akzentfarbe zusammen mit dem Design ändert: Wechseln Sie die Website vom blauen zum grünen Design, und jede Akzent-1-Kachel wird mit ihr grün. Mit Akzentfarben erstellte Panels wirken daher auf jeder Website, auf die sie kopiert werden, wie zu Hause und überstehen ein Rebranding ohne Bearbeitung. Woher die sechs Akzentfarben stammen: - **Moderne Designs**, die im SharePoint Admin Center oder mit dem Designgenerator erstellt wurden, definieren alle sechs Inhaltsakzente; jedes Design hat seinen eigenen Satz. - **Benutzerdefinierte Designs** können einige oder alle Inhaltsakzente undefiniert lassen. Ein Akzenteintrag, den das Design nicht definiert, fällt auf die primäre Akzentfarbe des Designs zurück – auf solchen Websites ergeben **Akzent 2** bis **Akzent 6** typischerweise alle dieselbe Farbe wie **Akzent 1**. ![Akzentkacheln folgen dem Websitedesign](https://static.vitextra.com/articles/10043/accent-colors-de.png) *Akzentkacheln folgen dem Websitedesign* ❗ **Wichtig** Da Akzentfarben vom Design abhängen, kann ein von einer Website exportiertes Panel auf einer anderen anders aussehen. Wenn die exakten Farben wichtig sind – etwa bei Unternehmensfarben –, verwenden Sie stattdessen die vordefinierten Farben. ## Vordefinierte Farben Die vordefinierten Farben sind die gemeinsame Farbpalette von Fluent UI, dem Designsystem von Microsoft 365. Sie ändern sich nicht mit dem Design. Die Zahl hinter einem Namen ist die Schattierung aus der Fluent-UI-Palette: 10 ist der Grundton, 20 und 30 sind zunehmend dunkler, 40 noch dunkler. |::Name::|::Wert::|::Name::|::Wert::| |:---|:---|:---|:---| |Rosarot|`#750b1c`|Zyan 10|`#00b7c3`| |Rot 20|`#a4262c`|Cyanblau 20|`#004e8c`| |Rot 10|`#d13438`|Cyanblau 10|`#0078d4`| |Rotorange|`#da3b01`|Blau 10|`#4f6bed`| |Orange 30|`#8e562e`|Blaumagenta 30|`#5c2e91`| |Orange 20|`#ca5010`|Blaumagenta 20|`#8764b8`| |Orange 10|`#ffaa44`|Blaumagenta 10|`#8378de`| |Gelb 10|`#fce100`|Magenta 20|`#881798`| |Orange-Gelb 20|`#986f0b`|Magenta 10|`#c239b3`| |Orange-Gelb 10|`#c19c00`|Magentarosa 20|`#9b0062`| |Gelbgrün|`#8cbd18`|Magentarosa 10|`#e3008c`| |Grün 20|`#0b6a0b`|Grau 40|`#393939`| |Grün 10|`#498205`|Grau 30|`#7a7574`| |Grüntürkis|`#00ad56`|Grau 20|`#69797e`| |Zyan 30|`#005b70`|Grau 10|`#a0aeb2`| |Zyan 20|`#038387`||| Zwei weitere Einträge vervollständigen die Liste: **Schwarz** (`#000000`) und **Weiß** (`#ffffff`). ![Die vordefinierten Farben](https://static.vitextra.com/articles/10043/predefined-colors-de.png) *Die vordefinierten Farben* ## Worauf sich die Schriftfarbe auswirkt Die **Schriftfarbe** wird für den Titel, die Beschreibung und das Symbol der Kachel verwendet, wenn das Symbol aus dem Satz **Standardsymbol** stammt – diese Symbole werden als Text gezeichnet und übernehmen die Farbe des Textes. Dateityp-, App-, Azure- und Vitextra-Symbole sowie eigene Bilder behalten ihre eigenen Farben. Die Beschreibung wird leicht transparent gezeichnet, sodass sie in derselben Farbe etwas heller erscheint als der Titel. ## Farben kombinieren - **Kontrast zuerst.** Weißer Text auf Rot 10, Grün 20, Cyanblau 10 oder einem beliebigen Grau ist gut lesbar; auf Gelb 10, Orange 10 oder Grau 10 verwenden Sie Schwarz. Die helleren Grundtöne – Orange 10, Gelb 10 – eignen sich besser für schwarzen Text; die Schattierungen 20, 30 und 40 für weißen. - **Eine Familie pro Panel.** Kacheln in mehreren Schattierungen einer Familie – zum Beispiel Zyan 10, 20 und 30 – wirken bewusst gewählt; sechs unzusammenhängende leuchtende Farben wirken wie ein Testbild. - **Nach Farbe gruppieren.** Geben Sie allen HR-Links eine Farbe und allen IT-Links eine andere, und das Panel erklärt sich ohne Überschriften von selbst. - **Akzent für die Website, vordefiniert für die Marke.** Verwenden Sie Akzentfarben für Panels, die sich in jedes Design der Website einfügen sollen, und vordefinierte Farben, wenn die Kacheln feste Unternehmensfarben tragen. 📝 **Hinweis** Kacheln ändern sich bei einem dunklen Design nicht von selbst: Eine weiße Kachel bleibt auf einer dunklen Seite weiß. Akzentfarben sind der einfache Weg zu einem Panel, das in hellen und dunklen Designs funktioniert, da das Design in beiden Fällen einen passenden Akzent liefert. 💡 **Tipp** Ein Foto kann die Hintergrundfarbe einer Kachel ersetzen; siehe [KB10245. Ein Hintergrundbild für eine Kachel festlegen](https://vitextra.com/de/support/kb/10245). Die Symbolsätze und ihre Reaktion auf die Schriftfarbe sind in [KB10243. Symbole für Kacheln auswählen](https://vitextra.com/de/support/kb/10243) beschrieben. Weitere Informationen zum Produkt: