Kleuren huisstijl
Copyright (c) 2021 Gemeente Utrecht.
De website gebruikt op hoofdlijnen de kleuren rood, geel, blauw, zwart, wit en grijs.
Rood
Rood wordt gebruikt als basiskleur in het ontwerp.
| Voorbeeld | Design Token naam | Hsl code | Hex code | Gebruik |
|---|---|---|---|---|
--utrecht-color-red-20 | hsl(0, 100%, 20%) | #660000 | Donker rood. Gebruikt wit (--utrecht-color-white) als tekstkleur op rood. | |
--utrecht-color-red-30 | hsl(0, 100%, 30%) | #990000 | Hover rood. Gebruikt wit ( | |
--utrecht-color-red-40 | hsl(0, 100%, 40%) | #CC0000 | Basis rood. Wordt gebruikt in de footer, in menu's, bij het zoeken. Toptaak buttons op projectsites. Gebruikt
wit ( | |
--utrecht-color-red-95 | hsl(0, 100%, 95%) | #FFE5E5 | Licht rood. Voor gebruik voor rode achtergrond. |
Inzichten uit onderzoek
Uit onderzoek blijkt dat laaggeletterden afschrikken van de kleur rood. Deze dus niet gebruiken bij iets waar op geklikt kan worden. De tekst wordt niet gelezen, de laaggeletterde acteert op kleur.
Blauw
--utrecht-color-blue-35 (donker blauw) wordt gebruikt als basiskleur voor links en knoppen. --utrecht-color-blue-80 (licht blauw) en --utrecht-color-blue-90 (ijsblauw) wordt gebruikt voor blokken.
| Voorbeeld | Design Token naam | Hsl code | Hex code | Gebruik |
|---|---|---|---|---|
--utrecht-color-blue-20 | hsl(211, 60%, 20%) | #143252 | Basis donkerblauw. | |
--utrecht-color-blue-35 | hsl(211, 60%, 35%) | #24578F | Basis kleur voor link en knoppen Call-to-action. Dit is de actie kleur op de (web)app. | |
--utrecht-color-blue-40 | hsl(211, 60%, 40%) | #2964A3 | Blauw variant bij hover/focus. | |
--utrecht-color-blue-80 | hsl(211, 60%, 80%) | #ADCBEB | Licht blauw voor achtergrond contactblok. | |
--utrecht-color-blue-90 | hsl(211 60% 90%) | #D6E5F5 | Ijsblauw variant voor achtergrond, spotlight en uitgelicht. |
Geel
Geel wordt gebruikt als ondersteunende kleur.
Logo
Het balkje in het digitale logo gebruikt utrecht-color-yellow-50.
| Voorbeeld | Design Token naam | Hsl code | Hex code | Gebruik |
|---|---|---|---|---|
--utrecht-color-yellow-40 | hsl(48, 100%, 40%) | #CCA300 | Donkere variant van basis geel. | |
--utrecht-color-yellow-50 | hsl(48, 100%, 50%) | #FFCC00 | Basis Gemeente Utrecht kleur geel. Gebruikt zwart (--utrecht-color-black) als tekstkleur op geel. | |
--utrecht-color-yellow-60 | hsl(48, 100%, 60%) | #FFD633 | Deze kleur geel wordt gebruikt als achtergrond bij het selecteren. | |
--utrecht-color-yellow-80 | hsl(48, 100% ,80%) | #FFEB99 | Achtergrond geel voor Spotlight en uitgelicht blokken. Gebruikt zwart ( |
Grijs
| Voorbeeld | Design Token naam | Hsl code | Hex code | Gebruik |
|---|---|---|---|---|
--utrecht-color-grey-10 | hsl(0, 0%, 10%) | #1A1A1A | Wordt gebruikt in Surface component. | |
--utrecht-color-grey-15 | hsl(0, 0%, 15%) | #262626 | Wordt gebruikt in Top navigatie als hover over een menu item. | |
--utrecht-color-grey-30 | hsl(0, 0%, 30%) | #4D4D4D | Wordt gebruikt voor borders in formuliercomponenten. | |
--utrecht-color-grey-40 | hsl(0, 0%, 40%) | #666666 | Formulier invul element kleur. | |
--utrecht-color-grey-80 | hsl(0, 0%, 80%) | #CCCCCC | Break out op landingpagina’s, kruimelpad, en diverse content elementen (spotlight, tabel, accordeon). Gebruikt
zwart ( | |
--utrecht-color-grey-90 | hsl(0, 0%, 90%) | #E6E6E6 | Diverse elementen in contentpagina (scheidingslijn, subnav border, accordeon). Gebruikt zwart
( | |
--utrecht-color-grey-95 | hsl(0, 0%, 95%) | #F2F2F2 | Basiskleur achtergrond kleur van de body. |
Groen
Groen wordt gebruikt als ondersteunende kleur.
| Voorbeeld | Design Token naam | Hsl code | Hex code | Gebruik |
|---|---|---|---|---|
--utrecht-color-green-40 | hsl(90, 30%, 40%) | #668547 | Donkere variant van basis groen | |
--utrecht-color-green-50 | hsl(90, 30%, 50%) | #80A659 | Basis Gemeente Utrecht groen | |
--utrecht-color-green-80 | hsl(90, 30%, 80%) | #CCDBBD | Nog niet in gebruik. | |
--utrecht-color-green-90 | hsl(90, 30%, 90%) | #E6EDDE | Achtergrond groen voor badges |
Zwart
| Voorbeeld | Design Token naam | Hsl code | Hex code | Gebruik |
|---|---|---|---|---|
--utrecht-color-black | hsl(0, 0%, 0%) | #000000 | Gebruik zwart als tekstkleur op de lichtere kleuren: Blauw: |
Wit
| Voorbeeld | Design Token naam | Hsl code | Hex code | Gebruik |
|---|---|---|---|---|
--utrecht-color-white | hsl(0, 0%, 100%) | #FFFFFF | Gebruik wit als tekstkleur op de donkere kleuren. Blauw: |
Secundaire kleuren
De secundaire kleuren zijn kleuren die gecombineerd kunnen worden met de primaire kleuren; ze zijn bedoeld voor ondersteunend gebruik. Het secundaire kleurenpalet wordt gebruikt voor kleurbanen, grafieken, illustraties en infographics. Gebruik geen andere kleuren. Zwart wordt voor alle lopende tekst gebruikt.
| Voorbeeld | Design Token naam | Hex code | Gebruik |
|---|---|---|---|
--utrecht-color-secondary-purple | #762cd1 | Paars | |
--utrecht-color-secondary-magenta | #f02198 | Magenta | |
--utrecht-color-secondary-red | #cc0000 | Rood | |
--utrecht-color-secondary-orange | #ff6e00 | Oranje | |
--utrecht-color-secondary-yellow | #ffcc00 | Geel | |
--utrecht-color-secondary-lime | #99d000 | Lime | |
--utrecht-color-secondary-green | #32ab27 | Groen | |
--utrecht-color-secondary-cyan | #009ed4 | Cyaan | |
--utrecht-color-secondary-blue | #006dff | Blauw | |
--utrecht-color-secondary-navy | #1c4181 | Marineblauw | |
--utrecht-color-secondary-brown | #ad643b | Bruin | |
--utrecht-color-secondary-grey | #757575 | Grijs |