Hexkoder för färg, RGB, HSL och OKLCH förklarade

Hexkoder för färg som #7c3aed är det vanligaste sättet att skriva en färg på skärmen: ett # följt av sex tecken som anger mängden rött, grönt och blått. RGB skriver samma tal decimalt, HSL ordnar om dem till nyans, färgmättnad och ljushet, och OKLCH beskriver färg så som ögat uppfattar den. De är olika skrivsätt för samma färger, och vart och ett är bäst på ett eget jobb.

Så fungerar hexkoder för färg

En hexkod är tre par av hexadecimala siffror: #RRGGBB. Bas 16 räknar 0 till 9 och sedan a till f, så varje par löper från 00 (ingen) till ff (255, full). I #7c3aed är rött 7c (124), grönt 3a (58) och blått ed (237): mycket blått, en hel del rött, lite grönt, vilket ger violett. Tre kanaler med 256 värden ger 16 777 216 möjliga färger.

• Förkortning: #f0c är detsamma som #ff00cc. Varje siffra dubbleras, så det fungerar bara för färger vars par upprepas.
• Genomskinlighet: en kod med åtta siffror lägger till alfa i slutet. #7c3aed80 är violetten med ungefär 50 % opacitet, eftersom 80 är 128 av 255.
• Versaler spelar ingen roll: #7C3AED och #7c3aed är identiska.
• Grått har tre lika par: #767676, #1a1a1a och #f4f4f4 är alla neutrala.

RGB: samma tal decimalt

RGB skriver de tre kanalerna som vanliga tal från 0 till 255. Modern CSS skiljer dem åt med mellanslag och lägger till genomskinlighet efter ett snedstreck; den äldre syntaxen med kommatecken och rgba() fungerar fortfarande överallt. RGB är praktiskt när ett verktyg eller ett API ber om tal, eller när du snabbt vill se hur en färg är sammansatt.

/* 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: nyans, färgmättnad och ljushet

HSL beskriver en färg med sin nyans som en vinkel på färgcirkeln (0 är rött, 120 grönt, 240 blått), sin färgmättnad från grått (0 %) till full färg (100 %) och sin ljushet från svart (0 %) via den rena färgen (50 %) till vitt (100 %). Det är lätt att justera för hand: för att få en mörkare violett sänker du sista talet.

Haken är att HSL:s ljushet är en formel, inte ett mått på hur ljus en färg ser ut. Gult vid 50 % ljushet ser långt ljusare ut än blått vid 50 %. Bygg en palett genom att hålla HSL-ljusheten lika, så ser färgerna inte lika ljusa ut, vilket är precis varför standardregnbågar ser randiga ut. Se regnbågsgradienter för det synliga resultatet.

OKLCH: färg så som du ser den

OKLCH kommer från Oklab, ett färgrum som Björn Ottosson publicerade 2020 och som numera ingår i CSS. Det använder tre värden: L är upplevd ljushet från 0 % till 100 %, C är kromatisk styrka, alltså hur färgstark den är, från 0 för grått upp till ungefär 0,37 för de mest intensiva färgerna, och H är nyansvinkeln. Lika L-värden ser verkligen lika ljusa ut, så du kan ändra en egenskap utan att störa de andra.

OKLCH glänser i gradienter. Vid blandning i vanlig sRGB, standard för hexfärger, dras en rak linje genom RGB-kuben, och färger på motsatta sidor av cirkeln möts i grått. Blandning i OKLCH behåller kromatisk styrka och färdas i stället runt nyanscirkeln.

.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);
}

Vilken färgkod du använder till vad

För att testa något av de här värdena visar oklch.com en färg i varje skrivsätt och varnar när den hamnar utanför en skärms omfång, och MDN:s färgreferens täcker varje syntax. Om du väljer färger snarare än skriver dem är så väljer du varumärkesfärger nästa steg, och färgkontrast visar hur du kontrollerar att texten förblir läsbar.