OKLCH srozumitelně: barevný formát, který konečně odpovídá vašemu oku

Co je OKLCH

OKLCH je polární podoba Oklab, percepčního barevného prostoru, který v roce 2020 zveřejnil Björn Ottosson. Tvoří ho tři čísla. L je vnímaná světlost od 0 (černá) po 1, neboli 100 % (bílá). C je chroma, tedy množství barvy, od 0 (šedá) zhruba po 0,37 u nejživějších barev, které obrazovky dokážou zobrazit. H je úhel barevného tónu od 0 do 360 stupňů.

Stejná barva zapsaná v různých formátech vypadá takto. Všechny hodnoty níže PickShade počítá živě, takže je můžete rovnou zkopírovat.

Proč je OKLCH lepší než HSL

Světlost v HSL je vzorec, ne vjem. hsl(60 100% 50%) je jasně žlutá a hsl(240 100% 50%) tmavě modrá, přesto obě uvádějí světlost 50 %. Když postavíte paletu na HSL, musíte každý tón ručně dolaďovat.

V OKLCH vypadají barvy se stejným L stejně světlé. Když zachováte L a C a budete otáčet H, získáte sadu vyvážených tónů. Když zachováte H a C a budete postupně měnit L, vznikne čistá škála odstínů. Proto Tailwind CSS v4 definuje celou výchozí paletu v OKLCH.

Světlost také předpovídá kontrast. Text, jehož L se od pozadí liší zhruba o 0,4 nebo víc, bývá čitelný, takže se o přístupných barvách mnohem snáz uvažuje.

Syntaxe v CSS

Světlost můžete zapsat v procentech nebo jako číslo od 0 do 1. Chroma je číslo. Barevný tón je úhel ve stupních. Průhlednost se píše za lomítko.

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

Podpora v prohlížečích

oklch() funguje ve všech aktuálních prohlížečích: v Safari od verze 15.4, v Chrome a Edge od verze 111, ve Firefoxu od verze 113. To pokrývá výrazně přes 90 % uživatelů. Kvůli velmi starým prohlížečům dejte na řádek před hodnotu OKLCH záložní HEX.

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

Maximální chroma a gamut

OKLCH umí popsat i barvy, které žádná obrazovka nezobrazí. Maximální chroma závisí na světlosti a tónu: živá žlutá je možná jen při vysoké světlosti, živá modrá jen při nízké. Když je hodnota mimo gamut sRGB nebo Display P3, prohlížeč ji do něj převede zpět a barva se tím může posunout.

PickShade označí barvy mimo sRGB a nabídne nejbližší barvu, která se do gamutu vejde. Najde ji snížením hodnoty chroma při zachování světlosti a tónu, tedy metodou, kterou doporučuje CSS Color 4.

Jak převést HEX na OKLCH

Převod vede z HEX do sRGB, ze sRGB do lineárního světla, z lineárního sRGB do prostoru čípků LMS, přes třetí odmocninu a matici do Oklab a nakonec z Oklab do polárních souřadnic. Ruční výpočet svádí k chybám, proto barvu raději vložte do převodníku a výsledek zkopírujte.

Otázky a odpovědi