Kleuren

Primaire kleuren

Als kleuren een semantische waarde 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 resulteert in 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 geen 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. Deze kleur wordt spaarzaam gebruikt 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)