Hoe geef je kleuren op in CSS?

Question

Accepted Answer

CSS biedt verschillende kleurformaten. Ze produceren dezelfde kleuren — de keuze gaat om leesbaarheid en of je transparantie nodig hebt.

```css
.a { color: red; }                      /* named keyword (~150 of them) */
.b { color: #ff5733; }                  /* hex: #RRGGBB */
.c { color: #ff5733cc; }                /* hex with alpha: #RRGGBBAA */
.d { color: rgb(255 87 51); }           /* red green blue (0–255) */
.e { color: rgb(255 87 51 / 0.8); }     /* with 80% opacity */
.f { color: hsl(9 100% 60%); }          /* hue saturation lightness */
.g { color: hsl(9 100% 60% / 0.5); }    /* HSL with alpha */
```

## Waarom HSL vaak het meest bruikbaar is

HSL beschrijft kleur als **H**ue (0–360° op het kleurwiel), **S**aturation en **L**ightness — wat aansluit bij hoe mensen over kleur denken, waardoor variaties intuïtief zijn:

```css
:root { --brand-h: 220; }
.primary       { background: hsl(var(--brand-h) 80% 50%); }
.primary-light { background: hsl(var(--brand-h) 80% 70%); } /* just raise lightness */
.primary-dark  { background: hsl(var(--brand-h) 80% 30%); } /* just lower it */
```

Een lichter/donkerder tint genereren is triviaal — verander één getal. Met hex of rgb moet je alle kanalen herberekenen.

## Alpha / transparantie

```css
background: rgb(0 0 0 / 0.5); /* 50% transparent black — for overlays */
```

De `/ alpha` syntax (0 = transparant, 1 = ondoorzichtig) is hoe je semi-transparante kleuren maakt, nuttig voor overlays en schaduwen. (Opmerking: `opacity` op een element vervaagt het *hele* element, inclusief onderliggende elementen — alpha-kleuren vervagen alleen die kleur.)

## Moderne formaten

```css
color: oklch(70% 0.15 220); /* perceptually-uniform; better for color systems */
```

## Waarom het belangrijk is

De formaten kennen stelt je in staat het juiste gereedschap te kiezen: hex/rgb voor eenmalige kleuren, **HSL/OKLCH voor designsystemen** (gemakkelijk, intuïtieve tintariaties), en de `/ alpha` syntax voor transparantie.

HSL maakt het bouwen van consistente, themeable kleurenpaletten veel gemakkelijker.