Skip to main content

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.

VoorbeeldDesign Token naamHsl codeHex codeGebruik
--utrecht-color-red-20hsl(0, 100%, 20%)#660000Donker rood. Gebruikt wit (--utrecht-color-white) als tekstkleur op rood.
--utrecht-color-red-30hsl(0, 100%, 30%)#990000

Hover rood. Gebruikt wit (--utrecht-color-white) als tekstkleur op rood. Wordt gebruikt voor de achtergrond van de social media buttons & om waarchuwingen aan te duiden.

--utrecht-color-red-40hsl(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-white) als tekstkleur op rood.

--utrecht-color-red-95hsl(0, 100%, 95%)#FFE5E5Licht 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.

VoorbeeldDesign Token naamHsl codeHex codeGebruik
--utrecht-color-blue-20hsl(211, 60%, 20%) #143252Basis donkerblauw.
--utrecht-color-blue-35hsl(211, 60%, 35%) #24578FBasis kleur voor link en knoppen Call-to-action. Dit is de actie kleur op de (web)app.
--utrecht-color-blue-40hsl(211, 60%, 40%) #2964A3Blauw variant bij hover/focus.
--utrecht-color-blue-80hsl(211, 60%, 80%) #ADCBEBLicht blauw voor achtergrond contactblok.
--utrecht-color-blue-90hsl(211 60% 90%) #D6E5F5Ijsblauw variant voor achtergrond, spotlight en uitgelicht.

Geel

Geel wordt gebruikt als ondersteunende kleur.

Het balkje in het digitale logo gebruikt utrecht-color-yellow-50.

VoorbeeldDesign Token naamHsl codeHex codeGebruik
--utrecht-color-yellow-40hsl(48, 100%, 40%) #CCA300Donkere variant van basis geel.
--utrecht-color-yellow-50hsl(48, 100%, 50%) #FFCC00Basis Gemeente Utrecht kleur geel. Gebruikt zwart (--utrecht-color-black) als tekstkleur op geel.
--utrecht-color-yellow-60hsl(48, 100%, 60%) #FFD633Deze kleur geel wordt gebruikt als achtergrond bij het selecteren.
--utrecht-color-yellow-80hsl(48, 100% ,80%) #FFEB99

Achtergrond geel voor Spotlight en uitgelicht blokken. Gebruikt zwart (--utrecht-color-black) als tekstkleur op geel.

Grijs

VoorbeeldDesign Token naamHsl codeHex codeGebruik
--utrecht-color-grey-10hsl(0, 0%, 10%)#1A1A1AWordt gebruikt in Surface component.
--utrecht-color-grey-15hsl(0, 0%, 15%)#262626Wordt gebruikt in Top navigatie als hover over een menu item.
--utrecht-color-grey-30hsl(0, 0%, 30%)#4D4D4DWordt gebruikt voor borders in formuliercomponenten.
--utrecht-color-grey-40hsl(0, 0%, 40%)#666666Formulier invul element kleur.
--utrecht-color-grey-80hsl(0, 0%, 80%)#CCCCCC

Break out op landingpagina’s, kruimelpad, en diverse content elementen (spotlight, tabel, accordeon). Gebruikt zwart (--utrecht-color-black) als tekstkleur op dit grijs. Gebruik voor links het standaard donkerblauw (--utrecht-color-blue-35).

--utrecht-color-grey-90hsl(0, 0%, 90%)#E6E6E6

Diverse elementen in contentpagina (scheidingslijn, subnav border, accordeon). Gebruikt zwart (--utrecht-color-black) als tekstkleur op dit lichte grijs. Gebruik voor tekstlinks het standaard donkerblauw (--utrecht-color-blue-35).

--utrecht-color-grey-95hsl(0, 0%, 95%)#F2F2F2Basiskleur achtergrond kleur van de body.

Groen

Groen wordt gebruikt als ondersteunende kleur.

VoorbeeldDesign Token naamHsl codeHex codeGebruik
--utrecht-color-green-40hsl(90, 30%, 40%) #668547Donkere variant van basis groen
--utrecht-color-green-50hsl(90, 30%, 50%) #80A659Basis Gemeente Utrecht groen
--utrecht-color-green-80hsl(90, 30%, 80%) #CCDBBDNog niet in gebruik.
--utrecht-color-green-90hsl(90, 30%, 90%) #E6EDDEAchtergrond groen voor badges

Zwart

VoorbeeldDesign Token naamHsl codeHex codeGebruik
--utrecht-color-blackhsl(0, 0%, 0%)#000000

Gebruik zwart als tekstkleur op de lichtere kleuren: Blauw: --utrecht-color-blue-80, --utrecht-color-blue-90. Geel: --utrecht-color-yellow-80. Grijs: --utrecht-color-grey-80, --utrecht-color-grey-90. Wit: --utrecht-color-white.

Wit

VoorbeeldDesign Token naamHsl codeHex codeGebruik
--utrecht-color-whitehsl(0, 0%, 100%)#FFFFFF

Gebruik wit als tekstkleur op de donkere kleuren. Blauw: --utrecht-color-blue-35. Rood: -utrecht-color-red-20, -utrecht-color-red-30. Grijs: --utrecht-color-grey-40. Zwart: --utrecht-color-white

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.

VoorbeeldDesign Token naamHex codeGebruik
--utrecht-color-secondary-purple#762cd1Paars
--utrecht-color-secondary-magenta#f02198Magenta
--utrecht-color-secondary-red#cc0000Rood
--utrecht-color-secondary-orange#ff6e00Oranje
--utrecht-color-secondary-yellow#ffcc00Geel
--utrecht-color-secondary-lime#99d000Lime
--utrecht-color-secondary-green#32ab27Groen
--utrecht-color-secondary-cyan#009ed4Cyaan
--utrecht-color-secondary-blue#006dffBlauw
--utrecht-color-secondary-navy#1c4181Marineblauw
--utrecht-color-secondary-brown#ad643bBruin
--utrecht-color-secondary-grey#757575Grijs

Design

Figma - Utrecht Design System - Kleuren