Barevná paleta (OKLCH)

K čemu je Barevná paleta (OKLCH)

Tohle ocení hlavně webaři a frontend vývojáři, kteří chtějí pracovat s barvami moderně — bez toho, aby museli ručně přepočítávat hodnoty nebo otevírat tři různé záložky najednou. Pokud tvoříš design systém, ladíš UI komponenty nebo řešíš přístupnost webu, víš jak otravné je skákat mezi hex kódem, RGB hodnotami a zároveň hlídat, jestli kontrast textu splňuje WCAG standardy.

Nástroj spojuje převod formátů barev s okamžitou kontrolou kontrastu na jednom místě. Navíc pracuje s OKLCH — barevným prostorem, který lépe odpovídá tomu, jak lidské oko vnímá jas a sytost. To znamená plynulejší přechody a předvídatelnější výsledky oproti starému RGB nebo HSL.

Co umí

• Převod barev mezi HEX, RGB a OKLCH v reálném čase
• Zobrazení kontrastu mezi dvěma barvami podle WCAG 2.1 (AA i AAA)
• Vizuální náhled kombinace popředí a pozadí
• Upozornění, jestli kombinace kontrastu projde nebo neprojde standardem
• Ruční zadání hodnot v libovolném z podporovaných formátů

Jak to funguje

1. Zadej barvu — buď jako HEX kód, RGB nebo OKLCH hodnoty.
2. Nástroj okamžitě přepočítá ekvivalenty ve všech ostatních formátech.
3. Nastav druhou barvu (třeba barvu textu nebo pozadí).
4. Podívej se na výsledek kontrastu — uvidíš poměr a jasný verdikt pro WCAG AA a AAA.
5. Upravuj hodnoty a sleduj změny živě, dokud nedosáhneš požadovaného výsledku.
6. Zkopíruj výslednou barvu v libovolném formátu přímo do svého CSS.

Časté otázky

Co je OKLCH a proč ho používat?

OKLCH je moderní CSS barevný prostor navržený tak, aby byl perceptuálně uniformní — stejná změna číselné hodnoty odpovídá stejně velké vizuální změně barvy. Díky tomu je generování barevných palet a přechodů konzistentnější než u RGB nebo HSL. Moderní prohlížeče ho nativně podporují.

Co přesně znamená WCAG AA a AAA kontrast?

WCAG (Web Content Accessibility Guidelines) definuje minimální poměry kontrastu pro čitelný text. Úroveň AA vyžaduje poměr alespoň 4,5:1 pro normální text, AAA pak 7:1. Splnění AA je praktický základ pro přístupné weby, AAA je vhodné třeba pro texty pro slabozraké uživatele.

Funguje nástroj i pro barvy s průhledností (alpha)?

Aktuálně nástroj pracuje s plně neprůhlednými barvami. Kontrast s průhledností závisí na podkladové vrstvě, takže ho nelze spolehlivě vyhodnotit bez znalosti kontextu.

Hodí se nástroj i pro práci s typografií nebo layoutem?

Přímo ne, ale dobře funguje vedle Typography Scale Generátoru — tam řešíš velikosti písma, tady jeho barvu a čitelnost. Pokud ladíš celkové CSS, může se ti hodit i CSS Specificity Kalkulátor.