Hex-fargekoder, RGB, HSL og OKLCH forklart

Hex-fargekoder som #7c3aed er den vanligste måten å skrive en farge på skjerm: en # etterfulgt av seks tegn som angir mengden rødt, grønt og blått. RGB skriver de samme tallene i titallsystemet, HSL omorganiserer dem til fargetone, metning og lyshet, og OKLCH beskriver farge slik øyet oppfatter den. Det er ulike skrivemåter for de samme fargene, og hver er best til sin jobb.

Slik fungerer hex-fargekoder

En hex-kode er tre par sifre i sekstentallsystemet: #RRGGBB. Sekstentallsystemet teller 0 til 9 og deretter a til f, så hvert par går fra 00 (ingenting) til ff (255, full styrke). I #7c3aed er rød 7c (124), grønn er 3a (58) og blå er ed (237): mye blått, en del rødt, lite grønt, altså fiolett. Tre kanaler med 256 verdier gir 16 777 216 mulige farger.

• Forkortelse: #f0c er det samme som #ff00cc. Hvert siffer dobles, så det fungerer bare for farger der parene gjentar seg.
• Gjennomsiktighet: en kode med åtte sifre legger til alfa på slutten. #7c3aed80 er fiolett med omtrent 50 % dekning, fordi 80 er 128 av 255.
• Store og små bokstaver spiller ingen rolle: #7C3AED og #7c3aed er identiske.
• Grå toner har tre like par: #767676, #1a1a1a og #f4f4f4 er alle nøytrale.

RGB: de samme tallene i titallsystemet

RGB skriver de tre kanalene som vanlige tall fra 0 til 255. Moderne CSS skiller dem med mellomrom og legger til gjennomsiktighet etter en skråstrek, mens den eldre kommasyntaksen og rgba() fortsatt fungerer overalt. RGB er praktisk når et verktøy eller en API ber om tall, eller når du vil lese hva en farge består av med et øyekast.

/* 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: fargetone, metning og lyshet

HSL beskriver en farge med fargetonen som en vinkel på fargehjulet (0 er rødt, 120 grønt, 240 blått), metningen fra grått (0 %) til full farge (100 %), og lysheten fra svart (0 %) via den rene fargen (50 %) til hvitt (100 %). Den er lett å justere for hånd: for å lage en mørkere fiolett senker du det siste tallet.

Haken er at HSLs lyshet er en formel, ikke et mål på hvor lys en farge ser ut. Gult på 50 % lyshet ser langt lysere ut enn blått på 50 %. Bygger du en palett med lik HSL-lyshet, ser ikke fargene like lyse ut, og det er nettopp derfor standard regnbuer ser stripete ut. Se regnbuegradienter for det synlige resultatet.

OKLCH: farge slik du ser den

OKLCH kommer fra Oklab, et fargerom publisert av Björn Ottosson i 2020 og nå en del av CSS. Den bruker tre verdier: L er oppfattet lyshet fra 0 % til 100 %, C er kroma, hvor fargesterk den er, fra 0 for grått opp til omtrent 0,37 for de mest livlige fargene, og H er fargetonevinkelen. Like L-verdier ser faktisk like lyse ut, så du kan endre én egenskap uten å forstyrre de andre.

OKLCH gjør seg best i gradienter. Når du blander i vanlig sRGB, standarden for hex-farger, trekkes det en rett linje gjennom RGB-kuben, og farger på motsatte sider av hjulet møtes i grått. Å blande i OKLCH bevarer kromaen og går i stedet rundt fargetonehjulet.

.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 fargekode du bruker hvor

For å teste noen av disse verdiene viser oklch.com en farge i alle skrivemåter og advarer når den faller utenfor en skjerms område, og MDNs fargereferanse dekker alle syntaksene. Hvis du velger farger i stedet for å skrive dem, er slik velger du merkevarefarger neste steg, og fargekontrast viser hvordan du sjekker at tekst forblir lesbar.