DSO Component Library

# Colors

## Primaire kleuren

Als kleuren een semantische waarden hebben kunnen gebruikers functionaliteiten sneller identificeren en gebruiken. Hanteer de volgende regels per kleur.

### Groen

Groen is de basis kleur voor het ontwerp van het DSO en brengt met zich mee een rustige en natuurlijke uitstraling.

#### Gebruiken voor

- Titels
- Subtitels
- Menu tekst
- Secundaire knoppen
- Steunkleuren

Grasgroen

- #39870c
- rgb(57, 135, 12)

Grasgroen 80%

- #609f3c
- rgb(96, 159, 60)

Grasgroen 40%

- #afcf9d
- rgb(175, 207, 157)

Grasgroen 10%

- #ebf3e6
- rgb(235, 243, 230)

Bosgroen

- #275937
- rgb(39, 89, 55)

Bosgroen 80%

- #527a5e
- rgb(82, 122, 94)

Bosgroen 40%

- #a8bcaf
- rgb(168, 188, 175)

Bosgroen 10%

- #e9eeeb
- rgb(233, 238, 235)

### Lime

Lime wordt gebruikt voor non-essential beeldmerken. Bijvoorbeeld vinkjes toevoegen na een succesvolle post. Deze kleur is niet een interactie kleur, in tegenstelling tot de andere groen kleuren.

Lime

- #79b929
- rgb(121, 185, 41)

Lime 20%

- #e4f1d4
- rgb(228, 241, 212)

### Oranje

Oranje is een sterke kleur die wordt gebruikt voor aandachtspunten. Een kleur die spaarzaam gebruikt moet worden voor essentiële onderdelen en accenten

#### Gebruiken voor

- Accenten
- Indicatoren
- Call to actions
- Primaire knoppen

Oranje

- #e17000
- rgb(225, 112, 0)

### Zwart

De bodytekst is “Zwart 90%” (#191919). “Zwart 90%” is minder intensief dan echt zwart en verhoogt de leesbaarheid als er lange stukken tekst op de pagina staan.

Zwart 90%

- #191919
- rgb(25, 25, 25)

Zwart 60%

- #666666
- rgb(102, 102, 102)

Zwart 10%

- #e5e5e5
- rgb(229, 229, 229)

Zwart 5%

- #f2f2f2
- rgb(242, 242, 242)

## Secundaire kleurenpalet

De secundaire kleuren zijn ontwikkeld naast de communicatiekleuren en zijn ontstaan vanuit de basiselementen: Aarde, Water, Lucht en Vuur. Warme en koude kleuren die de communicatiekleuren aanvullen. Deze kleuren kun je gebruiken als de communicatiekleuren niet toereikend zijn. Bijvoorbeeld in tabellen en grafieken waar meer kleurvariatie nodig is om duidelijk onderscheid te kunnen maken in verschillende waarden of legenda’s. Dus nooit als steunkleur voor accenten in de reguliere opmaak. Dan gebruik je uitsluitend het primaire kleurenpalet.

Let op: Deze kleuren worden naast het primaire kleurenpalet gebruikt en zijn ondergeschikt.

Geel

- #dcd400
- rgb(220, 213, 0)

Rood

- #ce3f51
- rgb(206, 63, 81)

Mintgroen

- #3fb498
- rgb(63, 180, 152)

Mauve

- #8b4a6a
- rgb(140, 75, 107)

Paars

- #676cb0
- rgb(104, 108, 176)

Donkerblauw

- #2b5780
- rgb(43, 87, 129)

Lichtblauw

- #6ca4d9
- rgb(108, 165, 218)

Bruin

- #644f49
- rgb(100, 80, 74)