Převeď HSL na kód HEX

Poslední revize obsahu:2026-10-07

Napiš hodnoty HSL a kód HEX se zobrazuje už během psaní: hsl(217.2, 91.2%, 59.8%) odpovídá #3B82F6. Pole přijme čárky, mezery i krytí za lomítkem. Se zápisem Office můžeš zadat tři čísla 0–255, která přečteš v okně Barvy.

HSL

Zadej odstín ve stupních a sytost a světlost v procentech. Hodnoty odděl čárkami nebo mezerami.

HEX

Zápis HSL

Zápis CSS odpovídá stylopisům a vývojářským nástrojům prohlížeče. Zápis 0–255 ukazuje okno Barvy ve Wordu, Excelu a PowerPointu.

Jak převést HSL na HEX?

Převeď sytost a světlost na zlomky od 0 do 1, spočítej z nich tři kanály RGB a každý kanál zapiš jako dvě šestnáctkové číslice. Výpočet stojí na chroma, tedy rozdílu mezi nejsilnějším a nejslabším kanálem barvy[1]. Pokud čísla pocházejí z okna Barvy v Office, přepni nejdřív zápis na Microsoft Office (0–255). Když už v poli nějaká barva je, přepínač ji přepíše na tutéž barvu v novém zápisu.

Vzorec: C = (1 − |2L − 1|) × S, nejsilnější kanál je L + C ÷ 2 a nejslabší L − C ÷ 2.

Vezmi hsl(217.2, 91.2%, 59.8%). Chroma tu vychází 0,733. Nejsilnější kanál má tedy 0,965 a nejslabší 0,231. Odstín 217,2° leží mezi azurovou a modrou. Nejsilnější je proto modrý kanál, nejslabší červený a zelený leží mezi nimi na 0,510[1].

Po vynásobení 255 vyjdou kanály 59, 130 a 246. Šestnáctkově je to 3B, 82 a F6, takže kód zní #3B82F6. Každá polovina tohoto postupu má vlastní nástroj: převodník HSL na RGB a převodník RGB na HEX.

Co v HSL znamená odstín, sytost a světlost?

První hodnota je odstín, zadaný jako úhel na barevném kole. Základní barvy obrazovky jsou od sebe 120 stupňů: červená na 0°, zelená na 120° a modrá na 240°, a 360° je opět červená[2].

Druhá hodnota je sytost. Při 100 % má barva plnou sytost, při 0 % se z ní stane šedá, na které odstín výsledek už neovlivní. Třetí hodnota je světlost. Při 0 % dá černou, při 100 % bílou a při 50 % plnou barvu daného odstínu[2].

CSS přijímá odstín i v jiných jednotkách úhlu. Celá otáčka je 360 stupňů, 400 gradů, 2π radiánů nebo jedna otáčka zapsaná jako 1turn[3]. Převodník přečte všechny tyto tvary, takže 0.25turn dá stejnou barvu jako 90°.

Model HSL byl popsán v roce 1978 a už v roce 1979 představila firma Tektronix grafické terminály, na kterých se barvy nastavovaly v HSL[1].

Pokud máš barvu v jiném zápisu, třeba v OKLCH, Lab nebo jako kód z Androidu, převodník barev ji ukáže najednou ve všech zápisech.

Jak v HSL vytvořit světlejší a tmavší varianty barvy?

Změň jen světlost a odstín se sytostí nech beze změny. Tabulka ukazuje devět stupňů světlosti pro hsl(217.2, 91.2%, 59.8%) a kódy HEX, které z nich vyjdou.

Světlost	HSL	Kód HEX
10 %	hsl(217.2, 91.2%, 10%)	#021431
20 %	hsl(217.2, 91.2%, 20%)	#042862
30 %	hsl(217.2, 91.2%, 30%)	#073C92
40 %	hsl(217.2, 91.2%, 40%)	#0950C3
50 %	hsl(217.2, 91.2%, 50%)	#0B64F4
60 %	hsl(217.2, 91.2%, 60%)	#3C83F6
70 %	hsl(217.2, 91.2%, 70%)	#6DA2F8
80 %	hsl(217.2, 91.2%, 80%)	#9DC1FB
90 %	hsl(217.2, 91.2%, 90%)	#CEE0FD

Stupeň 60 % dá #3C83F6. Výchozí barva #3B82F6 má světlost 59,8 %, tedy o 0,2 procentního bodu méně.

Jaké kódy HEX mají odstíny po 30 stupních?

Specifikace CSS ukazuje paletu HSL v krocích po 30°, od červených přes žluté, zelené, azurové a modré až po purpurové[2]. Všechny řádky mají sytost 100 % a světlost 50 %.

Odstín	Odstíny ve specifikaci CSS	HSL	Kód HEX
0°	červené	hsl(0, 100%, 50%)	#FF0000
30°	červenožluté, tedy oranžové	hsl(30, 100%, 50%)	#FF8000
60°	žluté	hsl(60, 100%, 50%)	#FFFF00
90°	žlutozelené	hsl(90, 100%, 50%)	#80FF00
120°	zelené	hsl(120, 100%, 50%)	#00FF00
150°	zelenoazurové	hsl(150, 100%, 50%)	#00FF80
180°	azurové	hsl(180, 100%, 50%)	#00FFFF
210°	azurově modré	hsl(210, 100%, 50%)	#0080FF
240°	modré	hsl(240, 100%, 50%)	#0000FF
270°	modropurpurové	hsl(270, 100%, 50%)	#8000FF
300°	purpurové	hsl(300, 100%, 50%)	#FF00FF
330°	purpurově červené	hsl(330, 100%, 50%)	#FF0080

Odstíny na 0°, 120° a 240° jsou základní barvy obrazovky, jejich kódy tedy mají jeden kanál plný a dva nulové. V mezikrocích jako 30° a 90° stojí jeden kanál v polovině stupnice, což je šestnáctkově 80.

Jaký kód HEX dají čísla z okna Barvy v Office?

Okno Barvy v Office ukazuje odstín, sytost a světlost na stupnici od 0 do 255[4]. Taková čísla jsme zadali do Office 2016 a výsledek odečetli ve stejném okně, a 40 kombinací vyšlo v převodníku přesně jako v programu. Tabulka jich ukazuje deset.

Hodnoty v Office	Kód HEX	Stejná barva v CSS
0, 255, 128	#FF0101	hsl(0, 100%, 50.2%)
42, 255, 128	#FFFF01	hsl(60, 100%, 50.2%)
85, 255, 128	#01FF01	hsl(120, 100%, 50.2%)
127, 255, 128	#01FFFF	hsl(180, 100%, 50.2%)
170, 255, 128	#0101FF	hsl(240, 100%, 50.2%)
213, 255, 128	#FF01FF	hsl(300, 100%, 50.2%)
154, 233, 153	#3C83F6	hsl(217.1, 91.2%, 60%)
170, 0, 128	#808080	hsl(0, 0%, 50.2%)
0, 0, 255	#FFFFFF	hsl(0, 0%, 100%)
0, 0, 0	#000000	hsl(0, 0%, 0%)

Čistá červená zadaná jako 0, 255 a 128 dá #FF0101. Světlost 128 je na stupnici do 255 o kousek víc než polovina, proto mají dva slabší kanály hodnotu 1.

Které zápisy barvy v HSL tento převodník zvládne?

Pole každý z těchto zápisů přijme a převede, takže před vložením nemusíš nic upravovat. Tabulka ukazuje, co s každým z nich převodník udělá, a výsledky spočítal sám.

Co zadáš	Výsledek převodníku	Jak to čteme
hsl(217.2, 91.2%, 59.8%)	#3B82F6	Starší zápis CSS s čárkami čteme stejně jako nový
hsl(217.2 91.2% 59.8%)	#3B82F6	Novější zápis CSS s mezerami přijímáme beze změny
217,2 91,2 59,8	#3B82F6	Samotná čísla s desetinnou čárkou, bez závorek a bez procent — poznáme je podle pořadí
H: 217.2 S: 91.2% L: 59.8%	#3B82F6	Písmena kanálů s dvojtečkou, jak je píše manuál značky, vynecháme a vezmeme čísla
hsl(217.2 91.2% 59.8% / 50%)	#3B82F680	Krytí uvedené za lomítkem přidáme do výsledku jako poslední dva znaky kódu
180°, 100%, 50%	#00FFFF	Znak stupně u odstínu nevadí, čteme jen číslo
color: hsl(217, 91%, 60%);	#3C83F6	Vlož celý řádek ze stylopisu, barvu z něj vytáhneme sami
154, 233, 153	#3C83F6	Tři čísla ve stupnici 0–255, tedy zápis Microsoft Office z okna Barvy ve Wordu a Excelu — při tomto nastavení přepínače Zápis je čteme stejně jako procenta

Kde vezmeš hodnoty HSL a kam vložíš kód HEX?

První dvě místa ti dají hodnoty HSL k převodu, další dvě přijmou hotový kód HEX.

Okno Barvy v Office
Otevři Výplň obrazce a vyber Další barvy výplně[5]. Na kartě Vlastní přepni barevný model na HSL a opiš čísla z polí Odstín, Sytost a Světelnost. V převodníku zvol zápis Microsoft Office (0–255).
Stylopis CSS
Vyhledej v souboru hsl( nebo hsla( a zkopíruj celou hodnotu i se závorkami. Převodník ji přijme s čárkami, mezerami i krytím za lomítkem.
Dokumenty, Tabulky a Prezentace Google
Na liště klikni na Barva textu nebo jiný nástroj s barevnými možnostmi. V části Vlastní klikni na Přidat vlastní barvu, vlož kód HEX a klikni na OK[6].
Figma
V pravém postranním panelu klikni na vzorek výplně. V seznamu barevných modelů pod posuvníky vyber Hex[7] a kód vlož do pole vedle.

Převést jiné jednotky na HEX

RGB na HEX CMYK na HEX

Převést HSL na jiné jednotky

HSL na RGB

Zdroje

HSL and HSV — Wikipedie (anglicky)
CSS Color Module Level 4 — HSL Colors: hsl() and hsla() functions — W3C
CSS Values and Units Module Level 4 — Angle Units — W3C
Vybírání barev v dialogovém okně Barvy — Microsoft Support
Přidání výplně nebo efektu k obrazci nebo textovému poli — Microsoft Support
Změna barvy textu, objektů a pozadí — Nápověda Editory Dokumentů
Update fills using the color picker — Figma Help Center

Všechny hodnoty v tabulkách jsme spočítali z definic jednotek a před zveřejněním ověřili výpočtem. Historické údaje a názvy místních jednotek vycházejí ze zdrojů uvedených výše.

Poslední revize obsahu: 7. října 2026 · napsal a zkontroloval tým Arteon

Časté otázky k převodu HSL na HEX

Proč hsl(217, 91%, 60%) dá jiný kód než #3B82F6?

HSL zaokrouhlené na celá čísla popisuje barvu méně přesně. hsl(217, 91%, 60%) dá #3C83F6, zatímco #3B82F6 odpovídá hsl(217.2, 91.2%, 59.8%). Kolik barev se takovým zaokrouhlením změní, ukazuje tabulka v převodníku HEX na HSL.

Jak zadat barvu HSL s průhledností?

Připiš krytí za lomítko, například hsl(217.2 91.2% 59.8% / 50%), nebo ho uveď jako čtvrtou hodnotu hsla()[2]. Převodník pak dá osmiznakový kód #3B82F680, jehož poslední dvě číslice nesou krytí.

Co se stane, když zadám sytost mimo 0–100 %?

Převodník ji omezí na hranici rozsahu, takže 150 % se počítá jako 100 %. Záporná hodnota se počítá jako 0 %, jak to vyžaduje specifikace CSS[2]. Se světlostí to funguje stejně.

Je odstín 360° stejná barva jako 0°?

Ano. Odstín je úhel, takže 360° je stejná červená jako 0°[2]. Ze stejného důvodu dá 480° stejnou zelenou jako 120° a −120° stejnou modrou jako 240°.

Jak převést HSL na hodnoty RGB?

Zadej hodnotu do převodníku HSL na RGB, který dá tři kanály od 0 do 255. Pro hsl(217.2, 91.2%, 59.8%) je výsledek rgb(59, 130, 246).

Jak přenést barvu z okna Office do stylopisu?

Vyber zápis Microsoft Office (0–255) a zadej tři čísla z okna Barvy. Kód HEX z pole výsledku vložíš rovnou do CSS a převodník HEX na HSL dá stejnou barvu ve stupních a procentech.

Snímek obrazovky bezplatného nástroje Arteon: Převeď HSL na kód HEX

Pomoz nám vylepšit naše nástroje

Máš nápad, vidíš chybu nebo chceš navrhnout nový nástroj? Napiš nám.