Převodník barev (HEX, RGB, HSL, OKLCH)

Převod barev mezi HEX, RGB, HSL, HWB, OKLCH a Lab s kontrastem podle WCAG. Anglicky color converter.

Vše se počítá přímo v tomto prohlížeči — žádná data nikam neodcházejí.

Výběr barvy

Živý náhled
Bez průhlednosti
#3B82F6

Hodnoty barvy

Napiš libovolný formát
HEX, rgb(), hsl(), oklch(), název…
RGBA0–255 každý kanál

A je krytí: 0 průhledná, 255 plná barva.

#RRGGBB nebo #RRGGBBAA

Například #FF5733 nebo s průhledností #FF573380.

#AARRGGBB

Pořadí kanálů jako v Androidu a WPF, průhlednost je na začátku.

signed 32-bit ARGB

Hodnota int z Android Color nebo Javy. Například −1 = #FFFFFFFF.

Táhni v ploše, posuň posuvník nebo napiš barvu do kteréhokoli pole.

Zápisy pro CSS a kontrast

HEX#3b82f6
RGBrgb(59 130 246)
HSLhsl(217 91% 60%)
HWBhwb(217 23% 4%)
OKLCHoklch(62.3% 0.188 259.81)
OKLaboklab(62.3% -0.0332 -0.1851)
Lablab(54.6% 8.8 -65.8)
LCHlch(54.6% 66.4 277.6)
Kontrast s bílou3.68:1 (AA velký text)
Kontrast s černou5.71:1 (AA)

Jak použít: Převodník barev (HEX, RGB, HSL, OKLCH)

Převodník barev převádí mezi zápisy HEX, RGBA, ARGB, celým číslem z Androidu, HSL, HWB, OKLCH a Lab a spočítá kontrast barvy s bílou a černou podle WCAG. Hodí se při převodu barev z grafického návrhu do CSS nebo do mobilní aplikace a při kontrole čitelnosti textu.

  1. Vyber barvu v ploše Výběr barvy, odstín a průhlednost nastav posuvníky pod ní.
  2. Nebo ji napiš do kteréhokoli pole: CSS (třeba #bf4614, rgb(191 70 20) nebo teal), kanály RGBA, HEX, ARGB nebo Celé číslo. Ostatní pole se hned přepočítají.
  3. Tlačítkem Kopírovat vezmi zápis, který potřebuješ. V tabulce pod výběrem najdeš zápisy pro CSS a kontrastní poměr.

Časté chyby a tipy

Kontrast textu
WCAG AA vyžaduje kontrast aspoň 4,5 : 1 pro běžný text a 3 : 1 pro velký. Nástroj Lighthouse v PageSpeed Insights hlásí nízký kontrast jako chybu přístupnosti.
Proč OKLCH
V OKLCH mají barvy se stejnou světlostí opravdu podobný jas, takže se v něm snadno tvoří palety a tmavé motivy. Moderní prohlížeče ho v CSS podporují.
Průhlednost
Barva s průhledností (#rrggbbaa, rgb(… / 50%)) má výsledný kontrast závislý na pozadí pod ní.

Nástroj je zdarma a běží celý v tvém prohlížeči — vložená data se nikam neodesílají ani neukládají.

Další nástroje v kategorii Web a ladění

  • JWT dekodér a ověření podpisu Dekódování JWT tokenu, kontrola platnosti (exp, nbf, iat) a ověření podpisu.
  • Tester regulárních výrazů Tester regexů pro JavaScript, PHP, Python, Go, .NET, Javu i Rust: shody, vysvětlení, mapa výrazu, náhrada, testy a hotový kód.
  • Kontrola a vyčištění SVG Kontrola SVG na skripty, zakódované stránky v Base64, vložené soubory, phishingové formuláře a externí zdroje a jejich bezpečné odstranění.
  • Validátor XML feedu pro Heureku a Zboží.cz Kontrola produktového XML feedu podle specifikace Heureka.cz a Zboží.cz: povinné elementy, formát ceny, dostupnosti a EAN, kódy dopravců, duplicitní ITEM_ID a jmenný prostor.
  • Náhled HTML a CSS Bezpečný náhled HTML a CSS v izolovaném rámu s výběrem šířky zařízení.
  • Porovnání dvou textů (diff) Porovnání dvou textů po řádcích, slovech nebo znacích, včetně unified diff.
  • Náhled Markdownu Živý náhled Markdownu (GitHub Flavored) s bezpečným HTML výstupem.
  • Vysvětlení cron výrazu Popis cron výrazu česky, výpis dalších spuštění a převod na crontab, systemd timer, launchd (macOS) a Plánovač úloh Windows.
  • Dekodér certifikátů X.509 Rozbor certifikátů X.509: subjekt, platnost, klíč, alternativní názvy, rozšíření a otisky.
  • Porovnání XML Strukturní porovnání dvou XML dokumentů s cestou ke každé změně.
  • Porovnání JSON Sémantické porovnání dvou JSON dokumentů bez ohledu na pořadí klíčů.
  • IP a CIDR kalkulačka Rozbor IPv4 a IPv6 adres a sítí: maska, rozsah hostitelů, broadcast, typ adresy a kontrola příslušnosti.
  • Rozbor řetězce User-Agent Rozpoznání prohlížeče, jádra, operačního systému a zařízení z řetězce User-Agent.
  • Rozbor e-mailových hlaviček Rozbor hlaviček e-mailu: odesílatel, předmět, datum, cesta zprávy přes servery (Received) a všechny hlavičky.
  • ASN.1 / DER dekodér Výpis struktury ASN.1 DER z PEM, Base64 nebo Hex: typy, OID se jmény, vnořené struktury (certifikáty, klíče).
  • Kontrast barev podle WCAG Kontrastní poměr textu a pozadí podle WCAG 2.2 (AA, AAA) a APCA pro barvy v libovolném CSS zápisu, s náhledem a návrhem vyhovující barvy.
  • Kalkulačka specificity CSS Výpočet specificity CSS selektorů včetně :is(), :not(), :has() a :where(), barevný rozbor a seřazení podle síly.
  • Kódy kláves v JavaScriptu Stiskni klávesu a uvidíš event.key, event.code, keyCode a location, s ukázkou obsluhy a tabulkou kódů kláves.
  • Porovnání hodnot v JavaScriptu (== a ===) Tabulka, které hodnoty se v JavaScriptu rovnají podle ==, === a Object.is(), s vysvětlením převodu typů krok po kroku.
  • Responzivní logo Jak udělat logo, které se na užší obrazovce zjednoduší: živá ukázka, postup a hotový kód s container query, <picture> nebo SVG spritem.