OKLCH förklarat: perceptuell färg för designers

OKLCH är ett sätt att skriva färg som ljushet, kroma och nyans, där ljusheten mäts så som människans ögon uppfattar den. I CSS är oklch(60% 0.2 293) en violett som ser ut att ligga 60 % av vägen från svart till vitt, med stark färg, vid en nyansvinkel på 293 grader. Den praktiska vinsten för designers är enkel: ändra nyansen och behåll L, så ser den nya färgen precis lika ljus ut. HSL kan inte lova det, och det är därför OKLCH har blivit standard i nyare designsystem, inklusive Tailwinds färgpalett.

Ljushet, kroma och nyans

Ljushet är stjärnan. Den kommer från OKLab, ett färgrum som publicerades 2020 och byggdes för att förutsäga upplevd ljushet, färgstyrka och nyans jämnare än äldre modeller. Kroma ersätter mättnad: i stället för en procentsats av något maximum är det en absolut mängd färg, så en kroma på 0,1 betyder samma visuella intensitet oavsett nyans. Nyans är fortfarande en vinkel, men vinklarna är fördelade så att ett steg på 30 grader ser ut som en liknande förändring hela varvet runt.

OKLCH mot HSL: samma ljushet, sida vid sida

Ta sex nyanser och håll ljusheten och kroman fasta vid oklch(65% 0.11 H). Färgproverna nedan ser ut som en familj, och deras kontrast mot vitt håller sig mellan 3,1:1 och 3,4:1. Gör samma sak i HSL vid 50 % ljushet och kontrasten mot vitt svänger från ungefär 1,07:1 för gult till 8,6:1 för blått.

Den jämnheten är det som gör OKLCH användbart i verkligt arbete. En uppsättning statusfärger, diagramserier eller kategoritaggar kan dela ett L och C och skilja sig bara i nyans, och ingen av dem skriker högre än de andra. Om du sedan behöver en färgblindsäker uppsättning varierar du L också, vilket tas upp i färgblindsvänliga paletter.

Så skriver du OKLCH i CSS

:root {
  /* lightness as a percentage or a number */
  --violet: oklch(60% 0.2 293);
  --violet-same: oklch(0.6 0.2 293);

  /* with transparency */
  --violet-soft: oklch(60% 0.2 293 / 0.4);

  /* grey: chroma 0, hue ignored */
  --grey: oklch(60% 0 0);
}

/* a fallback for very old browsers comes first */
.button {
  background: #8860ea;
  background: oklch(60% 0.2 293);
}

Webbläsarstödet är brett, och du kan bekräfta detaljerna på caniuse. För att utforska värden visuellt är oklch.com en färgväljare som visar vilka kombinationer en vanlig skärm kan visa. För att konvertera en befintlig hexkod för ett varumärke, klistra in den i den väljaren eller i färgpanelen i webbläsarens utvecklarverktyg, som kan visa vilken färg som helst i OKLCH.

Bygga en skala med OKLCH

För att göra en skala av ljusare och mörkare toner, stega ljusheten jämnt och låt kroman stiga mot mitten och sjunka mot ändarna. Mycket ljusa och mycket mörka färger kan fysiskt inte hålla mycket färg, så om du håller kroman hög i ytterlägena måste webbläsaren klippa dem. Här är en violett skala byggd på det sättet.

Eftersom L följer upplevd ljushet kan du fatta grova kontrastbeslut enbart utifrån siffrorna. I den här skalan klarar vit text 4,5:1 från L 50 och nedåt, och svart text klarar det från L 60 och uppåt. Bekräfta alltid med en kontrastkontroll, men du kommer sällan att bli överraskad. Hur en sådan skala görs till namngivna tokens tas upp i designtokens.

Gamut: när en färg inte finns på skärmen

OKLCH kan beskriva färger som ingen skärm kan visa. De flesta skärmar visar sRGB, många nyare telefoner och laptops visar det bredare Display P3. Skruva upp kroman tillräckligt högt och du lämnar båda. När det händer mappar webbläsaren färgen tillbaka till den närmaste som skärmen kan visa, så ingenting går sönder, men du får kanske inte det du skrev.

OKLCH-gradienter

Gradienter är där perceptuell färg lönar sig mest synligt. En vanlig CSS-gradient blandar i sRGB, som sjunker ner i grått mellan avlägsna nyanser. Modern CSS låter dig välja rum att blanda i, och OKLab eller OKLCH håller mitten klar och ren.

OKLab blandar i en rak linje och passar de flesta gradienter med två färger. OKLCH roterar nyansen, vilket är underbart för solnedgångar och regnbågar men kan överraska dig. Hela tekniken, inklusive nyckelorden shorter hue och longer hue, finns i CSS-gradienter i OKLCH, och teorin bakom i interpolering av gradienter.

Marks i Gradiently renderas live i stället för att skrivas som CSS, och var och en bär sin egen palett: auto-bläck väljer ljus eller mörk text ur den paletten för varje rad, så orden läses utan att du kontrollerar siffror. Vill du hellre utgå från en färdig levande bakgrund än ett värde i en färgväljare, bläddra i Marknaden efter färgord.