Převodník Barev — Online HEX, RGB, HSL Převodník _

Co je převod barev?

Každá barva, kterou váš prohlížeč vykreslí, je nakonec sRGB trojice — tři čísla mezi 0 a 255 pro červený, zelený a modrý kanál, plus volitelné alfa. Specifikace CSS Color Level 4 definuje několik textových formátů, které se překládají na stejnou trojici, plus perceptuálně-uniformní prostor OKLCH. Tento nástroj čte kterýkoli z nich, převádí na všechny a hlásí WCAG 2.1 kontrastní poměr proti druhé barvě, takže můžete dodávat přístupná rozhraní s důvěrou.

Jak funguje převod barev?

Převod je série dobře definovaných lineárních a nelineárních transformací. Každý krok běží ve vašem prohlížeči — žádný vstup nikdy nedorazí na naše servery:

1. Váš vstup je naparsován. Nástroj automaticky detekuje 3, 4, 6 nebo 8místný HEX, funkcionální formy rgb()/rgba()/hsl()/hsla()/hsv()/hwb() buď v legacy čárkové syntaxi nebo moderní syntaxi s lomítkem a alfou, nebo libovolnou ze 150 pojmenovaných CSS barev (rebeccapurple včetně).
2. Naparsovaná barva je normalizována na kanonické sRGB — čtyři floaty {r, g, b, a} každý v rozsahu 0–1. To je jediný zdroj pravdy, ze kterého je odvozen každý výstupní formát.
3. HEX vznikne zaokrouhlením každého kanálu na jeho 0–255 bajtovou hodnotu a spojením hex číslic. RGB / RGBA tisknou stejné bajty. HSL a HSV aplikují standardní W3C algoritmy cylindrických souřadnic; HWB odvozuje odstín z HSV, bělost z min(r, g, b) a černost z 1 - max(r, g, b).
4. CMYK je naivní aproximace — k = 1 - max(r, g, b), poté c, m, y z reziduálních kanálů. Je vhodný pro náhled na obrazovce, ale ne pro tisk: skutečný CMYK výstup vyžaduje ICC profil, který tento nástroj záměrně neobsahuje.
5. OKLCH následuje css-color-4 dopřednou cestu: sRGB je linearizováno, vynásobeno LMS maticí, odmocněno, vynásobeno LMS-to-OKLab maticí a nakonec převedeno z pravoúhlého OKLab na polární OKLCH. OKLCH je perceptuálně uniformní, což z něj činí správný prostor pro navrhování palet, které vypadají vyváženě pro lidské oko.

Proč použít tento převodník barev?

• Soukromí: každý převod běží ve vašem prohlížeči pomocí prostého JavaScriptu. Barva, kterou vložíte, nikdy neopustí vaše zařízení, což je důležité pro neutajenou brandovou práci, interní designové systémy a klientské mockupy pod NDA.
• Předání designér-vývojář: vložte HEX z Figmy a přečtěte si rgb() řetězec pro Tailwind config, hsl() řetězec pro CSS vlastní vlastnost nebo oklch() řetězec pro moderní paletu — každý formát na jednom místě, bez kopírování mezi záložkami.
• WCAG přesnost: kontrola kontrastu používá přesný vzorec relativní svítivosti WCAG 2.1 a publikované prahy AA (4,5 / 3,0) a AAA (7,0 / 4,5) pro normální a velký text. Uvedený poměr odpovídá manuálním kalkulačkám do 0,01.
• Odvození tmavého režimu a palet: HSL a OKLCH vystavují světlost jako jeden kanál, takže je přímočaré posunout brandovou barvu nahoru nebo dolů po ose světlosti pro odvození odpovídajících tokenů tmavého režimu nebo pro generování 10krokové palety z jediného semínka.

Jaké jsou běžné aplikace převodu barev?

Převod barev se objevuje napříč webovým vývojem, designem a prací na přístupnosti:

• Designové systémy: převod brandového HEX na odpovídající HSL a OKLCH tokeny pro škálu CSS vlastních vlastností, následné ověření, že každá kombinace tokenů prochází WCAG AA proti pozadí stránky.
• Audity přístupnosti: vložení páru popředí a pozadí z reálné obrazovky a přečtení kontrastního poměru plus AA/AAA verdiktů pro normální i velký text na první pohled.
• Překlady mezi nástroji: vytažení barvy z výběru barvy snímku obrazovky (HEX), vložení sem a zkopírování hsl() nebo oklch() řetězce přímo do Tailwindu, Figma tokenů nebo CSS-in-JS motivu.

Jak vypadá příklad převodu barev?

Vezměte známé rebeccapurple. Vyhledání pojmenované barvy jej přeloží na #663399. RGB převod dává rgb(102, 51, 153). HSL převod dává hsl(270, 50%, 40%) — fialový odstín, poloviční sytost, čtyři desetiny jas. Kontrola této barvy proti čistě bílé pomocí nástroje kontrastu vrací poměr blízko 7,39, což prochází AAA (7,0) pro normální text a AAA (4,5) pro velký text — silná, přístupná volba popředí. Překlad #663399 přes RGB → HSL → RGB → HEX vrací původní řetězec přesně, bajt po bajtu.

Používejte tento převodník jako rychlou referenci pro jakoukoli barvu, kterou potkáte — v kódu, v designových souborech nebo na snímku obrazovky — a kontrolu kontrastu jako pojistku před nasazením. Vše běží lokálně, nic není protokolováno a převodní matematika následuje publikované W3C a WCAG specifikace, takže čísla odpovídají tomu, co by hlásil váš auditní nástroj nebo vývojářské nástroje prohlížeče.