--- title: "Tegelkleuren in Smart Tiles: thema-accenten en vooraf gedefinieerde kleuren" description: "Achtergrond- en tekstkleuren voor tegels in Vitextra Smart Tiles: zes accentkleuren die het sitethema volgen, 31 vooraf gedefinieerde Fluent UI-kleuren, zwart en wit, met exacte waarden, terugvalgedrag bij ontbrekende thema-accenten en advies over kleurcombinaties." url: https://vitextra.com/nl/support/kb/10043 language: nl published: 2026-11-05 modified: 2026-11-07 products: - "Smart Tiles" author: "Līga Ozola" tags: ["Smart Tiles kleuren", "achtergrondkleur tegel", "tekstkleur tegel", "accentkleuren SharePoint-thema", "Fluent UI-kleurenpalet", "ContentAccent-themaslots", "SharePoint tegelkleuren", "tegels donker thema", "Vitextra Smart Tiles", "kleuren intranetnavigatie"] --- # Tegelkleuren in Smart Tiles: thema-accenten en vooraf gedefinieerde kleuren Achtergrond- en tekstkleuren voor tegels in Vitextra Smart Tiles: zes accentkleuren die het sitethema volgen, 31 vooraf gedefinieerde Fluent UI-kleuren, zwart en wit, met exacte waarden, terugvalgedrag bij ontbrekende thema-accenten en advies over kleurcombinaties. ## Inleiding Kleur is de snelste manier om tegels te groeperen en een paneel bij de ::site:: te laten passen. Elke tegel in [Smart Tiles](https://vitextra.com/nl/products/smart-tiles) heeft een **Achtergrondkleur** en een **Tekstkleur**, beide gekozen uit hetzelfde palet: zes accentkleuren die het sitethema volgen, eenendertig vooraf gedefinieerde kleuren, zwart en wit. Dit artikel geeft een overzicht van de kleuren, legt uit hoe accentkleuren werken en geeft suggesties voor kleurcombinaties. ## Een kleur kiezen 1. Open de pagina in de bewerkingsmodus en klik op de knop **…** van de tegel. 2. Wijs **Achtergrondkleur** of **Tekstkleur** aan. 3. Klik op een kleur in het submenu. Bij elke optie staat een cirkel in de betreffende kleur; de huidige kleur wordt aangegeven met een ingevuld selectievakje. De wijziging wordt onmiddellijk toegepast. Beide menu's bevatten dezelfde kleuren. Elke kleur kan dus worden gebruikt voor de achtergrond van de ene tegel en de tekst van een andere. ![Het menu Tekstkleur](https://static.vitextra.com/articles/10043/font-color-menu-nl.png) *Het menu Tekstkleur* Een nieuwe tegel heeft standaard **Accent 1** als achtergrondkleur en **Wit** als tekstkleur. ## Accentkleuren **Accent 1** tot en met **Accent 6** zijn geen vaste kleuren. Ze verwijzen naar de zes inhoudsaccentkleuren van het thema dat op de site is toegepast. Een tegel met een accentkleur verandert dus mee met het thema: als u het blauwe thema van de site vervangt door het groene, worden alle tegels met Accent 1 ook groen. Panelen met accentkleuren passen daardoor bij elke site waarnaar ze worden gekopieerd en hoeven bij een nieuwe huisstijl niet te worden aangepast. De zes accentkleuren worden als volgt bepaald: - **Moderne thema's** die in het ::SharePoint-beheercentrum:: of met de themagenerator zijn gemaakt, definiëren alle zes inhoudsaccenten. Elk thema heeft een eigen set. - **Aangepaste thema's** kunnen sommige of alle inhoudsaccenten ongedefinieerd laten. Een accent dat niet in het thema is gedefinieerd, valt terug op de primaire accentkleur van het thema. Op zulke sites leveren **Accent 2** tot en met **Accent 6** doorgaans allemaal dezelfde kleur op als **Accent 1**. ![Tegels met accentkleuren volgen het sitethema](https://static.vitextra.com/articles/10043/accent-colors-nl.png) *Tegels met accentkleuren volgen het sitethema* ❗ **Belangrijk** Omdat accentkleuren afhankelijk zijn van het thema, kan een paneel dat van de ene site is geëxporteerd er op een andere site anders uitzien. Gebruik vooraf gedefinieerde kleuren als de exacte kleuren van belang zijn, bijvoorbeeld voor huisstijlkleuren. ## Vooraf gedefinieerde kleuren De vooraf gedefinieerde kleuren vormen het gedeelde kleurenpalet van Fluent UI, het ontwerpsysteem van ::Microsoft 365::. Ze veranderen niet met het thema. Het getal na een naam geeft de tint in het Fluent UI-palet aan: 10 is de basistint, 20 en 30 zijn steeds donkerder en 40 is nog donkerder. |::Naam::|::Waarde::|::Naam::|::Waarde::| |:---|:---|:---|:---| |Rozerood|`#750b1c`|Cyaan 10|`#00b7c3`| |Rood 20|`#a4262c`|Cyaanblauw 20|`#004e8c`| |Rood 10|`#d13438`|Cyaanblauw 10|`#0078d4`| |Roodoranje|`#da3b01`|Blauw 10|`#4f6bed`| |Oranje 30|`#8e562e`|Blauw magenta 30|`#5c2e91`| |Oranje 20|`#ca5010`|Blauw magenta 20|`#8764b8`| |Oranje 10|`#ffaa44`|Blauw magenta 10|`#8378de`| |Geel 10|`#fce100`|Magenta 20|`#881798`| |Oranjegeel 20|`#986f0b`|Magenta 10|`#c239b3`| |Oranjegeel 10|`#c19c00`|Magenta-roze 20|`#9b0062`| |Geelgroen|`#8cbd18`|Magenta-roze 10|`#e3008c`| |Groen 20|`#0b6a0b`|Grijs 40|`#393939`| |Groen 10|`#498205`|Grijs 30|`#7a7574`| |Groen cyaan|`#00ad56`|Grijs 20|`#69797e`| |Cyaan 30|`#005b70`|Grijs 10|`#a0aeb2`| |Cyaan 20|`#038387`||| Twee extra opties maken de ::lijst:: compleet: **Zwart** (`#000000`) en **Wit** (`#ffffff`). ![De vooraf gedefinieerde kleuren](https://static.vitextra.com/articles/10043/predefined-colors-nl.png) *De vooraf gedefinieerde kleuren* ## Waarop de tekstkleur van toepassing is De **Tekstkleur** wordt gebruikt voor de titel, de beschrijving en het pictogram van de tegel als het pictogram uit de set **Standaardpictogram** komt. Deze pictogrammen worden als tekst weergegeven en nemen de tekstkleur over. Bestandstype-, app-, Azure- en Vitextra-pictogrammen en aangepaste afbeeldingen behouden hun eigen kleuren. De beschrijving wordt enigszins transparant weergegeven en lijkt daardoor iets lichter dan de titel in dezelfde kleur. ## Kleuren combineren - **Contrast voorop.** Witte tekst op Rood 10, Groen 20, Cyaanblauw 10 of Grijs 40 is goed leesbaar; gebruik Zwart op Geel 10, Oranje 10 of Grijs 10. De lichtere basistinten - Oranje 10 en Geel 10 - zijn geschikter voor zwarte tekst; de tinten 20, 30 en 40 voor witte tekst. - **Eén kleurfamilie per paneel.** Tegels in verschillende tinten van één familie, bijvoorbeeld Cyaan 10, 20 en 30, vormen een samenhangend geheel. Zes felle kleuren zonder onderling verband doen denken aan een testbeeld. - **Groeperen op kleur.** Geef alle HR-koppelingen één kleur en alle IT-koppelingen een andere. Zo is het paneel ook zonder koppen duidelijk. - **Accentkleuren voor de site, vooraf gedefinieerde kleuren voor het merk.** Gebruik accentkleuren voor panelen die bij elk sitethema moeten passen en vooraf gedefinieerde kleuren als de tegels vaste huisstijlkleuren gebruiken. 📝 **Opmerking** Tegels passen zich niet vanzelf aan een donker thema aan: een witte tegel blijft wit op een donkere pagina. Accentkleuren bieden een eenvoudige manier om een paneel te maken dat in lichte en donkere thema's werkt, omdat het thema in beide gevallen een passend accent levert. 💡 **Tip** Een foto kan de achtergrondkleur van een tegel vervangen; zie [KB10245. Een achtergrondafbeelding voor een tegel instellen](https://vitextra.com/nl/support/kb/10245). De pictogramsets en hun reactie op de tekstkleur worden beschreven in [KB10243. Pictogrammen voor tegels kiezen: de sets Standaard, Bestandstype, App, Azure en Vitextra](https://vitextra.com/nl/support/kb/10243). Meer informatie over het product: