OKLCH förklarat: färgformatet som äntligen stämmer med ögat

Vad OKLCH är

OKLCH är den polära formen av Oklab, en perceptuell färgrymd som Björn Ottosson publicerade 2020. Den består av tre tal. L är upplevd ljushet från 0 (svart) till 1 eller 100 % (vit). C är kroma, alltså mängden färg, från 0 (grå) till ungefär 0,37 för de mest intensiva färger en skärm kan visa. H är färgtonens vinkel från 0 till 360 grader.

Så här ser samma färg ut i olika format. Alla värden nedan räknas fram direkt av PickShade, så du kan kopiera dem som de är.

Därför är OKLCH bättre än HSL

Ljusheten i HSL är en formel, inte en upplevelse. hsl(60 100% 50%) är en klar gul och hsl(240 100% 50%) en mörk blå, men båda påstår sig ha 50 % ljushet. Bygger du en palett på HSL måste varje färgton justeras för hand.

I OKLCH ser färger med samma L lika ljusa ut. Behåll L och C och vrid H, så får du en uppsättning färgtoner som känns balanserade. Behåll H och C och stega L, så får du en ren tonskala. Det är därför Tailwind CSS v4 definierar hela sin standardpalett i OKLCH.

Ljusheten förutsäger också kontrast. Text vars L skiljer sig från bakgrundens med ungefär 0,4 eller mer är oftast läsbar, vilket gör tillgängliga färgval mycket lättare att resonera kring.

Syntax i CSS

Ljusheten kan skrivas som procent eller som ett tal från 0 till 1. Kroma är ett tal. Färgtonen är en vinkel i grader. Transparens skrivs efter ett snedstreck.

color: oklch(62.8% 0.258 29.23);
background: oklch(0.7 0.15 250 / 50%);
border-color: oklch(from var(--brand) calc(l - 0.1) c h);

Webbläsarstöd

oklch() fungerar i alla aktuella webbläsare: Safari sedan 15.4, Chrome och Edge sedan 111, Firefox sedan 113. Det täcker långt över 90 % av användarna. För riktigt gamla webbläsare lägger du en HEX-reserv på raden före OKLCH-värdet.

color: #ff5733;
color: oklch(68% 0.21 33.7);

Gränser för kroma och färgomfång

OKLCH kan beskriva färger som ingen skärm kan visa. Högsta möjliga kroma beror på ljushet och färgton: en intensiv gul går bara att få nära hög ljushet, en intensiv blå bara nära låg ljushet. När ett värde ligger utanför färgomfånget för sRGB eller Display P3 flyttar webbläsaren tillbaka det, och då kan färgen förskjutas.

PickShade markerar färger utanför sRGB och ger dig närmaste färg som ryms. Den hittas genom att sänka kroma och behålla ljushet och färgton, samma metod som CSS Color 4 rekommenderar.

Så konverterar du HEX till OKLCH

Konverteringen går från HEX till sRGB, från sRGB till linjärt ljus, från linjär sRGB till LMS-rymden för ögats tappar, via en kubikrot och en matris till Oklab och till sist från Oklab till polära koordinater. För hand blir det lätt fel, så klistra in valfri färg i konverteraren och kopiera resultatet.

Frågor och svar