Nástroj přijme každý CSS zápis hex barvy: 6místný #3366cc, 3místnou zkratku #36c i 4- a 8místné varianty s alfa kanálem, s křížkem # nebo bez něj. Zobrazí řetězec hsl() nebo hsla(), samotné hodnoty a rozpad po jednotlivých složkách - a navíc i opačný převod z HSL na HEX, když potřebujete jít druhým směrem. Vše se počítá přímo ve vašem prohlížeči - žádné nahrávání, žádný účet, žádné limity.
Převod HEX na HSL
Běží celé ve vašem prohlížeči - nic se nenahrává, žádná registrace.
CSS
hsl(220, 60%, 50%)Jak se to počítá
Odstín220
Sytost60%
Světlost50%
Potřebujete to obráceně? HSL na HEX
#3366ccJak převést HEX na HSL?
Nejprve se hex kód rozloží na červenou, zelenou a modrou složku (0-255) a ta se pak vyjádří jako odstín, sytost a světlost. Odstín je úhel na barevném kole (0-360), sytost udává, jak živá barva je (0-100 %), a světlost, jak je jasná (0-100 %). Z #3366cc tak vznikne hsl(220, 60%, 50%). Tento nástroj to spočítá okamžitě, jakmile začnete psát.
Jak na to
- 1Zadejte hex kód. Napište nebo vložte hex barvu jako #3366cc (nebo #36c), případně ji vyberte pomocí barevného vzorníku. Křížek # je volitelný.
- 2Přečtěte si hodnotu HSL. Řetězec hsl(), samotné hodnoty i živý náhled barvy se aktualizují za psaní, s rozpadem na odstín, sytost a světlost.
- 3Zkopírujte formát, který potřebujete. Klikněte na Kopírovat vedle řetězce hsl() nebo vedle syrových hodnot. Potřebujete to obráceně? Zadejte níže odstín, sytost a světlost a získáte zpět hex kód.
Pro koho je nástroj
- Front-end vývojáři, kteří převádějí hex kód na hsl(), aby mohli doladit světlost pro hover a focus stavy, aniž by museli volit úplně novou barvu.
- Designéři skládající paletu, kteří drží odstín pevný a postupně mění sytost a světlost, aby z jedné firemní barvy vytvořili odstíny a tóny.
- Autoři témat a design tokenů, kteří ukládají barvy jako HSL, protože se dají ručně číst a upravovat mnohem snáz než hex řetězec.
- Kdokoli sjednocuje barvy mezi nástroji, kde jeden chce hex (Figma, většina CSS) a druhý HSL (SCSS pomocníci, některé barevné systémy).
Časté dotazy
Je tento převodník HEX na HSL zdarma?
Ano - je 100% zdarma, bez registrace a bez limitů. Běží celý ve vašem prohlížeči.
Nahrávají se moje barvy někam na server?
Ne. Převod počítá čistý JavaScript přímo ve vašem zařízení - nic se neposílá na server a po načtení stránky funguje i offline.
Co je HSL?
HSL znamená odstín (hue), sytost (saturation) a světlost (lightness). Odstín je úhel od 0 do 360 stupňů na barevném kole, sytost udává, jak živá barva je, od 0 do 100 procent, a světlost jde od 0 procent (černá) přes čistou barvu na 50 procentech až po 100 procent (bílá).
Jak převést hex na HSL ručně?
Hex se rozloží na červenou, zelenou a modrou a každá se vydělí 255. Z těchto tří hodnot se vezme maximum a minimum: světlost je jejich průměr, sytost je (max - min) dělené (1 - |2L - 1|) a odstín se určí podle toho, která složka je maximální, přepočtený na 0-360 stupňů.
Podporuje 3místnou zkratku jako #36c?
Ano. V CSS zkratce se každá číslice zdvojí, takže #36c se rozbalí na #3366cc a převede se na hsl(220, 60%, 50%). 4místná varianta funguje stejně, poslední číslice navíc nese alfu.
Jak zvládá průhlednost (HSLA)?
8místný hex kód nese alfu v posledních dvou znacích. Tento byte (0-255) se vydělí 255, čímž vznikne hodnota alfa 0-1, kterou očekává hsla(), zaokrouhlená na tři desetinná místa - takže #3366cc80 se stane hsla(220, 60%, 50%, 0.502).
Umí to převést HSL zpět na HEX?
Ano. Použijte řádek HSL na HEX pod výsledkem: zadejte odstín (0-360) a sytost a světlost (0-100 %) a hex kód se vrátí okamžitě. Hodnoty mimo rozsah se oříznou na platné meze.
Proč je HSL užitečnější než hex?
HSL se dá číst i bez nástroje: barvu zesvětlíte zvýšením L, ztlumíte snížením S, nebo jí změníte odstín úpravou H - a to vše bez hádání jednotlivých hex číslic. Díky tomu se skvěle hodí na tvorbu jednotných palet, hover stavů a design tokenů.