{/ @license CC0-1.0 /}

{/ To enable adding frontmatter separately for docusaurus /}

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-white`) als tekstkleur op rood. Wordt gebruikt voor de achtergrond van de social media buttons & om waarchuwingen aan te duiden.
	`--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-white`) als tekstkleur op rood.
	`--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 (`--utrecht-color-black`) als tekstkleur op geel.

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-black`) als tekstkleur op dit grijs. Gebruik voor links het standaard donkerblauw (`--utrecht-color-blue-35`).
	`--utrecht-color-grey-90`	`hsl(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-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: `--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

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: `--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.

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

Design

Figma - Utrecht Design System - Kleuren