Web Fundamentals

Weergave

Kleur ​

The times they are a-changing

Gebruik van kleur in CSS is de afgelopen jaren het hard veranderd, dus wat je op oudere sites en in oudere cursussen tegenkomt, is niet meer OK!

Je studeert binnen 3 jaar af met de kennis van nu. Niet met de kennis van 5 jaar geleden.

Oude kleurnotaties ​

Dezelfde groene kleur, zes keer geschreven:

css
background-color: #00FF00;                  /* hexadecimaal, kort: #0F0 */
background-color: rgb(0, 255, 0);           /* rood, groen, blauw */
background-color: rgba(0, 255, 0, .5);      /* met transparantie */
background-color: hsl(120, 100%, 50%);      /* hue, saturation, lightness */
background-color: hsla(120, 100%, 50%, .5); /* met transparantie */
background-color: lime;                     /* named colour */

Die moet je kunnen lezen, want je gaat ze overal zien.
Maar wat deze cursus betreft zijn ze ouderwets en dus sterk af te raden.

rgba() en hsla() als aparte functies zijn deprecated: rgb() en hsl() nemen nu zelf een alpha-waarde. En de komma's zijn eruit.

css
/* niet meer */
background-color: rgba(0, 255, 0, .5);

/* wel */
background-color: rgb(0 255 0 / 50%);

Hex en named colours zijn nog steeds geldige CSS.
Maar. Je kan er niet mee redeneren. #3a7bd5 zegt je niets over hoe licht of hoe verzadigd (donker) die kleur is, en dus ook niets over of hij leesbaar het op een witte achtergrond.

OKLCH ​

De nieuwe specificatie (CSS Color Module Level 4) voegt veertien manieren toe om kleuren te definiëren. Dat is er licht over. Wij gebruiken er één: oklch().

Reden 1: lightness is voorspelbaar ​

In de 'oude' HSL is de lightness berekend volgens lichtenergie, niet volgens wat je oog effectief waarneemt. Twee kleuren met precies dezelfde lightness kunnen voor jou toch totaal verschillend lichter of donkerder lijken.

css
/* allebei lightness 50%, allebei witte tekst erop */
background-color: hsl(90 100% 50%);   /* geelgroen: wit is onleesbaar */
background-color: hsl(270 100% 50%);  /* paars: wit is prima leesbaar */

Het verschil in lightness is in beide gevallen 50%, en toch is het ene contrast goed en het andere fout. Je kan in HSL dus niet redeneren over contrast.

In OKLCh is de lightness visueel verdeeld. Diezelfde twee kleuren hebben daar een lightnessverschil van 48% tegenover 11%, daar zie je meteen: 11% is te weinig!

🧑‍🦯‍➡️ webtoegankelijkheid - accessibility

Contrastfouten staan in de top drie van meest voorkomende toegankelijkheidsproblemen op het web!

Met oklch kies je je kleuren zo dat je die fout niet maakt, in plaats van hem achteraf te moeten opsporen met de axe devtools die je al kent uit de vorige les.

Reden 2: er bestaan meer kleuren dan je scherm ​

Een standaardscherm toont de sRGB-kleurenset. Daar zijn RGB en HSL op gebouwd. Nieuwere schermen, zoals die van Apple en OLED-panelen, tonen de ruimere P3-set.

Met oklch() kan je kleuren benoemen die buiten sRGB vallen. Op een scherm dat ze aankan zie je ze, op een ander scherm valt de browser terug op de dichtstbijzijnde kleur die wel kan.

💡 Experimenteer!

Op hueplot.ardov.me zie je die kleurruimtes in drie dimensies.

Oklch notatie ​

css
color: oklch(0.25 0.01 325);
background-color: oklch(0.99 0.003 325);
border-color: oklch(0.5 0.2 25 / 50%);
WaardeWatBereik
LLightness: hoe licht0 tot 1, of 0% tot 100%
CChroma: hoe verzadigd0 tot ongeveer 0.4
HHue: welke kleur op de kleurencirkel0 tot 360
AAlpha, optioneel/ 0 tot / 1, of / 0% tot / 100%

Geen komma's tussen L, C en H. Wel een schuine streep voor de alpha.

Gebruik de kleurkiezer

Je hoeft die getallen niet te verzinnen. Gebruik oklch.com, je ziet meteen het resultaat en je krijgt de CSS om te kopiëren.

Heb je een hex-kleur uit een design of een logo, dan kan je die er ook in plakken en laat de tool je zien wat de oklch-waarden zijn.

Tl;dr ​

  • geen komma's
  • geen rgba() of hsla(), maar oklch(),
  • controleer je contrast tussen tekst en achtergrond!

Volgende week

Je gaat deze week nog dezelfde kleuren op veel verschillende plaatsen herhalen in je stylesheet.
Als je die wil aanpassen is dat erg vervelend.

Daar bestaat een oplossing voor, CSS custom properties, of simpel gezegd "css variabelen".
Die komen later aan bod.

Meer lezen ​