Jak převádět barvy mezi HEX, RGB a HSL

Weboví návrháři a vývojáři často pracují s barvami v různých formátech napříč projekty, návrhovými systémy a nástroji. Ať už přecházíte mezi maketou návrhu v HSL, souborem CSS využívajícím RGB nebo doporučením značky v HEX, znalost, jak převádět mezi těmito formáty rychle, šetří čas a zabraňuje chybám.

Pochopení tří hlavních barevných formátů

HEX (hexadecimální) zápis představuje barvy jako šestimístné kódy #FF5733, kde dvojice znaků definují intenzitu červené, zelené a modré. RGB (červená, zelená, modrá) používá pro každý barevný kanál desetinné hodnoty od 0 do 255 – např. rgb(255, 87, 51). HSL (hue, saturation, lightness) popisuje barvu pomocí úhlu pro odstín (0-360°), procenta pro sytost (0-100 %) a procenta pro světlost (0-100 %), zapsané jako hsl(9, 100%, 60%).

Proč převádět mezi formáty

Různé nástroje a kontexty upřednostňují různé formáty. Návrháři často pracují v HSL, protože je intuitivní pro nastavení jasu a sytosti. Weboví vývojáři používají RGB nebo HEX v šablonách stylů CSS. Tisková produkce může vyžadovat jiný barevný prostor. Převod umožňuje přesouvat práci mezi nástroji, aniž byste museli ručně znovu zadávat barvy.

Jak konverze funguje

Převod mezi formáty zahrnuje matematické vztahy. HEX-to-RGB je přímočaré: rozdělte šest znaků do tří párů a převeďte každý z hexadecimálních (základ 16) na desítkové (základ 10). RGB-to-HSL je složitější, nalezení maximálních a minimálních hodnot kanálu, pak odvození odstínu, sytosti a světlosti. Reverzní procesy používají inverzní matematiku pro návrat zpět.

Převod barev online

Ruční výpočet je náchylný k chybám při opakovaných převodech. Použití Převodník barev pro okamžitou transformaci mezi HEX, RGB a HSL. Vložte barvu v libovolném formátu a uvidíte ekvivalenty ve všech ostatních, takže nemusíte rozumět matematice sami.

Zajistěte přístupný výběr barev

Jakmile barvu převedete, ověřte, zda splňuje standardy přístupnosti pomocí Kontrola kontrastu pro potvrzení dostatečného kontrastu s vaším textem. Pokud potřebujete designovou inspiraci, Generátor náhodných barev vytváří nové palety, které pak můžete převést do preferovaného formátu.

Soukromí: barvy zůstanou na vašem zařízení

Převaděč barev zpracuje každý převod ve vašem prohlížeči – na server se neodesílají žádná data. Vaše barevné palety, nedokončené návrhy a specifikace značky zůstanou ve vašem zařízení soukromé. Nástroj funguje offline po načtení stránky, takže můžete pokračovat v převodu barev bez přístupu k internetu.