## 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

<div class="color-row">
  <div class="color-chip" style="background-color: #39870c;">
    <div class="label">Grasgroen</div>
    <div class="description">
      <ul>
        <li>#39870c</li>
        <li>rgb(57, 135, 12)</li>
      </ul>
    </div>
  </div>
  <div class="color-chip" style="background-color: #609f3c;">
    <div class="label">Grasgroen 80%</div>
    <div class="description">
      <ul>
        <li>#609f3c</li>
        <li>rgb(96, 159, 60)</li>
      </ul>
    </div>
  </div>
  <div class="color-chip" style="background-color: #afcf9d;">
    <div class="label">Grasgroen 40%</div>
    <div class="description">
      <ul>
        <li>#afcf9d</li>
        <li>rgb(175, 207, 157)</li>
      </ul>
    </div>
  </div>
  <div class="color-chip" style="background-color: #ebf3e6;">
    <div class="label">Grasgroen 10%</div>
    <div class="description">
      <ul>
        <li>#ebf3e6</li>
        <li>rgb(235, 243, 230)</li>
      </ul>
    </div>
  </div>
</div>
<div class="color-row">
  <div class="color-chip" style="background-color: #275937;">
    <div class="label">Bosgroen</div>
    <div class="description">
      <ul>
        <li>#275937</li>
        <li>rgb(39, 89, 55)</li>
      </ul>
    </div>
  </div>
  <div class="color-chip" style="background-color: #527a5e;">
    <div class="label">Bosgroen 80%</div>
    <div class="description">
      <ul>
        <li>#527a5e</li>
        <li>rgb(82, 122, 94)</li>
      </ul>
    </div>
  </div>
  <div class="color-chip" style="background-color: #a8bcaf;">
    <div class="label">Bosgroen 40%</div>
    <div class="description">
      <ul>
        <li>#a8bcaf</li>
        <li>rgb(168, 188, 175)</li>
      </ul>
    </div>
  </div>
  <div class="color-chip" style="background-color: #e9eeeb;">
    <div class="label">Bosgroen 10%</div>
    <div class="description">
      <ul>
        <li>#e9eeeb</li>
        <li>rgb(233, 238, 235)</li>
      </ul>
    </div>
  </div>
</div>

### Lime
<p>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.</p>

<div class="color-row">
  <div class="color-chip" style="background-color: #79b929;">
    <div class="label">Lime</div>
    <div class="description">
      <ul>
        <li>#79b929</li>
        <li>rgb(121, 185, 41)</li>
      </ul>
    </div>
  </div>
  <div class="color-chip" style="background-color: #e4f1d4;">
    <div class="label">Lime 20%</div>
    <div class="description">
      <ul>
        <li>#e4f1d4</li>
        <li>rgb(228, 241, 212)</li>
      </ul>
    </div>
  </div>
</div>

### 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

<div class="color-row">
  <div class="color-chip" style="background-color: #e17000;">
    <div class="label">Oranje</div>
    <div class="description">
      <ul>
        <li>#e17000</li>
        <li>rgb(225, 112, 0)</li>
      </ul>
    </div>
  </div>
</div>

### 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.

<div class="color-row">
  <div class="color-chip" style="background-color: #191919;">
    <div class="label">Zwart 90%</div>
    <div class="description">
      <ul>
        <li>#191919</li>
        <li>rgb(25, 25, 25)</li>
      </ul>
    </div>
  </div>
  <div class="color-chip" style="background-color: #666666;">
    <div class="label">Zwart 60%</div>
    <div class="description">
      <ul>
        <li>#666666</li>
        <li>rgb(102, 102, 102)</li>
      </ul>
    </div>
  </div>
  <div class="color-chip" style="background-color: #e5e5e5;">
    <div class="label">Zwart 10%</div>
    <div class="description">
      <ul>
        <li>#e5e5e5</li>
        <li>rgb(229, 229, 229)</li>
      </ul>
    </div>
  </div>
  <div class="color-chip" style="background-color: #f2f2f2;">
    <div class="label">Zwart 5%</div>
    <div class="description">
      <ul>
        <li>#f2f2f2</li>
        <li>rgb(242, 242, 242)</li>
      </ul>
    </div>
  </div>
</div>

## 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.**

<div class="color-row">
  <div class="color-chip" style="background-color: #dcd400;">
    <div class="label">Geel</div>
    <div class="description">
      <ul>
        <li>#dcd400</li>
        <li>rgb(220, 213, 0)</li>
      </ul>
    </div>
  </div>
  <div class="color-chip" style="background-color: #ce3f51;">
    <div class="label">Rood</div>
    <div class="description">
      <ul>
        <li>#ce3f51</li>
        <li>rgb(206, 63, 81)</li>
      </ul>
    </div>
  </div>
  <div class="color-chip" style="background-color: #3fb498;">
    <div class="label">Mintgroen</div>
    <div class="description">
      <ul>
        <li>#3fb498</li>
        <li>rgb(63, 180, 152)</li>
      </ul>
    </div>
  </div>
  <div class="color-chip" style="background-color: #8b4a6a;">
    <div class="label">Mauve</div>
    <div class="description">
      <ul>
        <li>#8b4a6a</li>
        <li>rgb(140, 75, 107)</li>
      </ul>
    </div>
  </div>
</div>
<div class="color-row">
  <div class="color-chip" style="background-color: #676cb0;">
    <div class="label">Paars</div>
    <div class="description">
      <ul>
        <li>#676cb0</li>
        <li>rgb(104, 108, 176)</li>
      </ul>
    </div>
  </div>
  <div class="color-chip" style="background-color: #2b5780;">
    <div class="label">Donkerblauw</div>
    <div class="description">
      <ul>
        <li>#2b5780</li>
        <li>rgb(43, 87, 129)</li>
      </ul>
    </div>
  </div>
  <div class="color-chip" style="background-color: #6ca4d9;">
    <div class="label">Lichtblauw</div>
    <div class="description">
      <ul>
        <li>#6ca4d9</li>
        <li>rgb(108, 165, 218)</li>
      </ul>
    </div>
  </div>
  <div class="color-chip" style="background-color: #644f49;">
    <div class="label">Bruin</div>
    <div class="description">
      <ul>
        <li>#644f49</li>
        <li>rgb(100, 80, 74)</li>
      </ul>
    </div>
  </div>
</div>
