Hex-farvekoder, RGB, HSL og OKLCH forklaret

Hex-farvekoder som #7c3aed er den mest almindelige måde at skrive en farve på en skærm: et # efterfulgt af seks tegn, der angiver mængden af rød, grøn og blå. RGB skriver de samme tal i decimal, HSL ordner dem om til farvetone, mætning og lysstyrke, og OKLCH beskriver farve, sådan som øjet opfatter den. Det er forskellige notationer for de samme farver, og hver er bedst til sin opgave.

Sådan virker hex-farvekoder

En hexkode er tre par cifre i base 16: #RRGGBB. Base 16 tæller fra 0 til 9 og derefter a til f, så hvert par går fra 00 (ingen) til ff (255, fuld styrke). I #7c3aed er rød 7c (124), grøn er 3a (58), og blå er ed (237): meget blå, en del rød og lidt grøn, altså violet. Tre kanaler med 256 værdier giver 16.777.216 mulige farver.

• Forkortelse: #f0c er det samme som #ff00cc. Hvert ciffer fordobles, så det kun virker for farver, hvis par gentager sig.
• Gennemsigtighed: en kode med otte cifre tilføjer alfa til sidst. #7c3aed80 er violetten ved omkring 50 % dækning, fordi 80 er 128 ud af 255.
• Store og små bogstaver er ligegyldigt: #7C3AED og #7c3aed er identiske.
• Grå har tre ens par: #767676, #1a1a1a og #f4f4f4 er alle neutrale.

RGB: de samme tal i decimal

RGB skriver de tre kanaler som almindelige tal fra 0 til 255. Moderne CSS adskiller dem med mellemrum og tilføjer gennemsigtighed efter en skråstreg. Den ældre syntaks med kommaer og rgba() virker stadig overalt. RGB er praktisk, når et værktøj eller et API beder om tal, eller når du vil aflæse en farves sammensætning med det samme.

/* All four lines are the same violet */
color: #7c3aed;
color: rgb(124 58 237);
color: rgb(124, 58, 237);
color: hsl(262 83% 58%);

/* The same violet at 50% opacity */
color: #7c3aed80;
color: rgb(124 58 237 / 0.5);

HSL: farvetone, mætning og lysstyrke

HSL beskriver en farve ud fra dens farvetone som en vinkel på farvehjulet (0 er rød, 120 grøn, 240 blå), dens mætning fra grå (0 %) til fuld farve (100 %) og dens lysstyrke fra sort (0 %) via den rene farve (50 %) til hvid (100 %). Den er nem at justere i hånden: for at lave en mørkere violet sænker du det sidste tal.

Haken er, at HSL’s lysstyrke er en formel og ikke en måling af, hvor lys en farve ser ud. Gul ved 50 % lysstyrke ser langt lysere ud end blå ved 50 %. Bygger du en palet ved at holde HSL-lysstyrken ens, vil farverne ikke se lige lyse ud, og det er netop derfor, standardregnbuer ser stribede ud. Se regnbuegradienter for det synlige resultat.

OKLCH: farve, som du ser den

OKLCH stammer fra Oklab, et farverum udgivet af Björn Ottosson i 2020 og nu en del af CSS. Det bruger tre værdier: L er opfattet lysstyrke fra 0 % til 100 %, C er kromatik, altså hvor farverig den er, fra 0 for grå op til omkring 0,37 for de mest levende farver, og H er farvetonens vinkel. Lige store L-værdier ser rent faktisk lige lyse ud, så du kan ændre én egenskab uden at forstyrre de andre.

OKLCH udmærker sig i gradienter. Blander du i almindelig sRGB, som er standard for hexfarver, tegnes en ret linje gennem RGB-terningen, og farver på hver sin side af hjulet mødes i gråt. Blander du i OKLCH, bevares kromatikken, og blandingen bevæger sig i stedet rundt om farvehjulet.

.band {
  /* Tell the browser which space to blend in */
  background: linear-gradient(in oklch 90deg, #2563eb, #facc15);
}

:root {
  /* One hue, a scale of equal steps in perceived lightness */
  --violet-90: oklch(90% 0.05 293);
  --violet-70: oklch(70% 0.16 293);
  --violet-54: oklch(54.1% 0.247 293);
  --violet-35: oklch(35% 0.16 293);
  --violet-20: oklch(20% 0.08 293);
}

Hvilken farvekode du bruger hvor

Til at teste disse værdier viser oklch.com en farve i alle notationer og advarer, når den falder uden for en skærms område, og MDN’s farvereference dækker al syntaks. Vælger du farver frem for at skrive dem, er sådan vælger du brandfarver næste skridt, og farvekontrast viser, hvordan du tjekker, at tekst forbliver læsbar.