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

OKLCH popisuje barvu podle toho, jak světlá se jeví, jak výrazná je a jaký má barevný tón. Na rozdíl od HSL vypadá stejná hodnota světlosti opravdu stejně světle u všech tónů, takže palety, stavy při najetí myší (hover) i přístupný kontrast jsou předvídatelné.

Zdroj: https://pickshade.com/cs/oklch
Aktualizováno: 2026-09-28

## 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.

| Formát | Hodnota |
| --- | --- |
| HEX | #ff5733 |
| RGB | rgb(255 87 51) |
| HSL | hsl(10.59 100% 60%) |
| OKLCH | oklch(68.036% 0.21001 33.692) |
| OKLab | oklab(68.036% 0.17474 0.1165) |

## 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.

```css
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.

```css
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

### Podporují OKLCH všechny prohlížeče?

Ano, všechny aktuální: Safari 15.4 a novější, Chrome a Edge 111 a novější, Firefox 113 a novější. Pokud musíte podporovat starší prohlížeče, přidejte před něj řádek s HEX.

### Jaký je rozdíl mezi OKLCH a LCH?

Oba popisují světlost, chroma a barevný tón. CSS lch() vychází z CIELAB, kde modré barvy při změně světlosti ujíždějí k fialové. OKLCH vychází z Oklab, který tón drží stabilní, takže škály odstínů modré zůstanou modré.

### Proč barva v OKLCH vypadá jinak než zadaná hodnota?

Chroma je nejspíš vyšší, než vaše obrazovka při dané světlosti a tónu dokáže zobrazit. Prohlížeč barvu převede do gamutu displeje. Snižujte chroma, dokud ji PickShade přestane označovat jako barvu mimo gamut.

### Lze OKLCH používat s Tailwind CSS?

Ano. Tailwind CSS v4 už OKLCH používá pro svou výchozí paletu a vlastní barvy v @theme můžete zapsat přímo v OKLCH.

## Nástroje

- [Převodník HEX na OKLCH](https://pickshade.com/cs/convert/hex-to-oklch)
- [Výběr barvy s posuvníky OKLCH](https://pickshade.com/cs)
- [Paleta Tailwind v4 v OKLCH](https://pickshade.com/cs/tailwind)

## Související návody

- [Barevný gamut srozumitelně: sRGB, Display P3 a barvy mimo gamut](https://pickshade.com/cs/gamut)
- [Barevné formáty srozumitelně: HEX, RGB, HSL, OKLCH a další](https://pickshade.com/cs/color-formats)
- [Barvy v Tailwind CSS: paleta v4 v OKLCH, vlastní barvy a stupně](https://pickshade.com/cs/tailwind-colors)