Co je OKLCH a proč bych ho měl používat místo HEX nebo HSL?

OKLCH (Světlost, Chroma, Odstín) je perceptuálně rovnoměrný barevný prostor založený na modelu Oklab. Na rozdíl od HEX nebo HSL produkují stejné numerické změny v OKLCH stejné vnímané rozdíly. To z něj dělá ideální volbu pro navrhování přístupných barevných palet, vytváření plynulých přechodů a generování konzistentních barevných škál Tailwind v4.

Jak převedu HEX na OKLCH?

Vložte svou hodnotu HEX (např. #3b82f6) do vstupního pole HEX a pole OKLCH se okamžitě aktualizuje s ekvivalentní notací oklch(0.6 0.18 250). Všechny ostatní formáty — OKLab, RGB a HSL — se také synchronizují současně, takže získáte úplný a přesný výsledek bez jakékoli další akce z vaší strany.

Co znamená 'mimo gamut sRGB' a co se stane s barvou?

Některé barvy OKLCH — zejména hodnoty s vysokou chromou — překračují barevný prostor sRGB, který většina displejů používá. Když k tomu dojde, nástroj aplikuje algoritmus toGamut z CSS Color 4, aby nalezl nejbližší zobrazitelnou barvu sRGB. Zobrazí se žlutý varovný banner s původní hodnotou mimo gamut vedle mapovaného výsledku, takže přesně víte, co se s vaší barvou děje.

Jak funguje generátor palety OKLCH Tailwind v4?

Generátor používá oficiální rozvrh světlosti Tailwind v4 (50=0.971, 100=0.945, až 950=0.238) aplikovaný na váš aktuální odstín a chroma. Vytváří 11 barevných kroků od světlého po tmavý a exportuje je jako blok kódu @theme { --color-brand-50: oklch(...); } připravený k vložení do vašeho CSS.

Proč vypadá interpolace OKLCH lépe než HSL pro přechody?

HSL interpoluje skrze cylindrický souřadnicový systém, který neodpovídá lidskému vnímání, což často způsobuje šedé propady nebo neočekávané posuny odstínu uprostřed přechodu. OKLCH interpoluje v perceptuálně rovnoměrném prostoru Oklab, takže světlost a chroma přecházejí plynule bez neočekávaných barevných odchylek ve střední části přechodu.

Je tento převodník OKLCH zdarma a soukromý?

Ano. Nástroj je zcela zdarma a běží výhradně ve vašem prohlížeči pomocí knihovny culori. Žádné hodnoty barev nejsou odesílány na server a veškeré zpracování probíhá lokálně na vašem zařízení pro úplné soukromí dat.

Funguje CSS Color 4 OKLCH ve všech prohlížečích?

Syntaxe barev OKLCH (oklch()) je podporována ve všech moderních prohlížečích od roku 2023, včetně Chrome 111+, Firefox 113+, Safari 15.4+ a Edge 111+. Pro starší prohlížeče použijte záložní hodnoty HEX nebo RGB, které tento převodník poskytuje pro plnou zpětnou kompatibilitu.

Nástroje pro barvy

Převodník barev OKLCH – CSS Color 4, generátor palety Tailwind v4

Bezplatný převodník barev OKLCH s živou synchronizací mezi OKLCH, OKLab, RGB, HSL a HEX. Obsahuje posuvníky L/C/H/alfa, mapování gamutu CSS Color 4 a export palety Tailwind v4.

OKLCH (Světlost, Chroma, Odstín) je perceptuálně rovnoměrný barevný prostor postavený na modelu Oklab a oficiálně přijatý v CSS Color Level 4. Na rozdíl od RGB nebo HSL udržuje OKLCH vnímanou světlost konzistentní napříč odstíny, což z něj dělá ideální volbu pro přístupné barevné systémy, palety Tailwind v4 a plynulé přechody.

Jak používat převodník barev OKLCH

1
Zadejte hodnotu barvy
Napište nebo vložte hodnotu v libovolném podporovaném formátu: oklch(0.6 0.18 250), #3b82f6, rgb(59, 130, 246), hsl(217deg 91% 60%) nebo oklab(0.6 -0.056 -0.169). Nástroj okamžitě synchronizuje všechny ostatní formáty.
2
Dolaďte pomocí posuvníků L/C/H/Alfa
Přetáhněte posuvníky Světlost (L), Chroma (C), Odstín (H) nebo Alfa. Posuvník chroma zobrazuje značku hranice gamutu sRGB, takže vždy víte, kdy barva překračuje standardní rozsah zobrazení.
3
Zkontrolujte varování gamutu, pokud se zobrazí
Pokud je vaše barva OKLCH mimo gamut sRGB, zobrazí se žlutý varovný banner s původní hodnotou a výsledkem mapování pomocí toGamut z CSS Color 4, který se používá pro zobrazení.
4
Vygenerujte paletu Tailwind v4
Sekce palety OKLCH Tailwind v4 automaticky generuje barevné kroky 50–950 pro váš aktuální odstín podle oficiálního rozvrhu světlosti Tailwind. Klikněte na Kopírovat a vložte blok @theme přímo do svého CSS.

Reference

W3C CSS Color Level 4 – oklch()
Specifikace W3C definující notaci barev OKLCH a algoritmy mapování gamutu.
Culori – JavaScript knihovna barev
Open-source knihovna zajišťující konverzi OKLCH, mapování toGamut a perceptuální interpolaci v tomto nástroji.
Evil Martians – OKLCH v CSS: Proč opustit RGB a HSL?
Komplexní průvodce vysvětlující výhody OKLCH oproti RGB a HSL pro moderní práci s barvami.
Tailwind CSS v4 – Výchozí paleta
Oficiální dokumentace barevné palety Tailwind včetně hodnot světlosti OKLCH používaných v tomto generátoru palety.

Související nástroje

Převodník barev

Převádějte mezi RGB, RGBA, HEX, HSL, HSV a CMYK s obousměrnou synchronizací v reálném čase.

Minifikátor CSS

Minifikujte CSS, které používá vaše hodnoty barev OKLCH.

Prohlížeč SVG

Náhled a kontrola SVG grafiky používající hodnoty výplně a tahu OKLCH.

Často kladené otázky

Co je OKLCH a proč bych ho měl používat místo HEX nebo HSL?: OKLCH (Světlost, Chroma, Odstín) je perceptuálně rovnoměrný barevný prostor založený na modelu Oklab. Na rozdíl od HEX nebo HSL produkují stejné numerické změny v OKLCH stejné vnímané rozdíly. To z něj dělá ideální volbu pro navrhování přístupných barevných palet, vytváření plynulých přechodů a generování konzistentních barevných škál Tailwind v4.
Jak převedu HEX na OKLCH?: Vložte svou hodnotu HEX (např. #3b82f6) do vstupního pole HEX a pole OKLCH se okamžitě aktualizuje s ekvivalentní notací oklch(0.6 0.18 250). Všechny ostatní formáty — OKLab, RGB a HSL — se také synchronizují současně, takže získáte úplný a přesný výsledek bez jakékoli další akce z vaší strany.
Co znamená 'mimo gamut sRGB' a co se stane s barvou?: Některé barvy OKLCH — zejména hodnoty s vysokou chromou — překračují barevný prostor sRGB, který většina displejů používá. Když k tomu dojde, nástroj aplikuje algoritmus toGamut z CSS Color 4, aby nalezl nejbližší zobrazitelnou barvu sRGB. Zobrazí se žlutý varovný banner s původní hodnotou mimo gamut vedle mapovaného výsledku, takže přesně víte, co se s vaší barvou děje.
Jak funguje generátor palety OKLCH Tailwind v4?: Generátor používá oficiální rozvrh světlosti Tailwind v4 (50=0.971, 100=0.945, až 950=0.238) aplikovaný na váš aktuální odstín a chroma. Vytváří 11 barevných kroků od světlého po tmavý a exportuje je jako blok kódu @theme { --color-brand-50: oklch(...); } připravený k vložení do vašeho CSS.
Proč vypadá interpolace OKLCH lépe než HSL pro přechody?: HSL interpoluje skrze cylindrický souřadnicový systém, který neodpovídá lidskému vnímání, což často způsobuje šedé propady nebo neočekávané posuny odstínu uprostřed přechodu. OKLCH interpoluje v perceptuálně rovnoměrném prostoru Oklab, takže světlost a chroma přecházejí plynule bez neočekávaných barevných odchylek ve střední části přechodu.
Je tento převodník OKLCH zdarma a soukromý?: Ano. Nástroj je zcela zdarma a běží výhradně ve vašem prohlížeči pomocí knihovny culori. Žádné hodnoty barev nejsou odesílány na server a veškeré zpracování probíhá lokálně na vašem zařízení pro úplné soukromí dat.
Funguje CSS Color 4 OKLCH ve všech prohlížečích?: Syntaxe barev OKLCH (oklch()) je podporována ve všech moderních prohlížečích od roku 2023, včetně Chrome 111+, Firefox 113+, Safari 15.4+ a Edge 111+. Pro starší prohlížeče použijte záložní hodnoty HEX nebo RGB, které tento převodník poskytuje pro plnou zpětnou kompatibilitu.