Kleur is een krachtig middel in webdesign. Het beïnvloedt sfeer, leesbaarheid en conversies. Met CSS en kennis van kleurtheorie kun je kleuren effectief toepassen.
Kleuren in CSS
| Eigenschap | Voorbeeld | Beschrijving |
|---|---|---|
| Naamkleuren | color: red; | Basiskleuren met naam |
| Hexadecimaal | color: #00bf63; | Veelgebruikte notatie (#RRGGBB) |
| RGB | color: rgb(255, 0, 0); | Rood-groen-blauw (0–255) |
| RGBA | color: rgba(0, 0, 255, 0.5); | Met transparantie (alpha 0–1) |
| HSL | color: hsl(120, 100%, 50%); | Tint, verzadiging, lichtheid |
| HSLA | color: hsla(240, 100%, 50%, 0.5); | HSL + transparantie |
Kleurenschema’s (color harmonies)
| Schema | Beschrijving | Voorbeeld |
|---|---|---|
| Monochroom | Variaties van één kleur | Lichtblauw → Donkerblauw |
| Complementair | Twee tegenoverliggende kleuren | Blauw & Oranje |
| Analoog | Kleuren naast elkaar op het wiel | Geel, Geelgroen, Groen |
| Triadisch | Drie kleuren met 120° verschil | Rood, Geel, Blauw |
| Tetradisch | Vier kleuren in rechthoek | Blauw, Oranje, Groen, Rood |
Kleurenpsychologie in webdesign
| Kleur | Betekenis | Gebruik |
|---|---|---|
| Rood | Energie, urgentie | Call-to-action knoppen, waarschuwingen |
| Blauw | Vertrouwen, rust | Banken, technologie, zakelijke sites |
| Groen | Groei, natuur, balans | Duurzaamheid, gezondheid |
| Geel | Vrolijk, creatief | Accentkleur, waarschuwingen |
| Oranje | Enthousiasme, actie | Call-to-action knoppen |
| Zwart | Kracht, luxe | Mode, high-end merken |
| Wit | Simpel, schoon | Minimalistisch design, achtergrond |
Contrast & toegankelijkheid
Minimaal contrast: 4.5:1 (WCAG-richtlijn voor normale tekst).
Gebruik donkere tekst op lichte achtergrond of omgekeerd.
Test kleurencombinaties met contrastcheckers (bv. WebAIM).
Voorbeeld CSS:
Transparantie & overlays
Gebruik RGBA of HSLA voor transparante lagen.
Gradients
Populaire soorten:
Linear gradient: overgang in één richting
Radial gradient: vanuit een middelpunt
Conic gradient: cirkelvormige overgang
Best practices
Beperk het aantal hoofdkleuren (2–3 plus accent).
Gebruik kleuren consistent voor functies (bijv. rood voor foutmeldingen, groen voor succes).
Zorg altijd voor voldoende contrast.
Test design in donker én licht thema.
Houd rekening met kleurenblindheid → gebruik ook iconen of patronen naast kleur.