Převeď kód HEX na HSL
Napiš kód HEX a hodnoty HSL se zobrazují už během psaní: #3B82F6 odpovídá hsl(217.2, 91.2%, 59.8%). Výsledek má jedno desetinné místo, takže když ho zadáš zpět, dostaneš stejnou barvu. Přepínač ti dá zápis CSS nebo čísla 0–255 z okna Barvy v Office.
Jak převést HEX na HSL?
Rozlož kód na tři kanály RGB a každý vyděl číslem 255. Nejvyšší a nejnižší kanál dají světlost a sytost a nejvyšší kanál určí odstín[1].
Vzorec: L = (max + min) ÷ 2, S = (max − L) ÷ min(L, 1 − L) a H je úhel počítaný od kanálu s nejvyšší hodnotou.
Vezmi #3B82F6. Kanály mají hodnoty 59, 130 a 246. Po vydělení 255 dají 0,231, 0,510 a 0,965. Průměr nejvyššího a nejnižšího kanálu je 0,598, světlost je tedy 59,8 %. Vzorec pro sytost dá 91,2 %.
Nejsilnější je modrý kanál, proto výpočet odstínu začíná na 240 stupních. Červená je slabší než zelená, takže se odečte 22,8 stupně a odstín vyjde 217,2°. Celá barva se v CSS zapíše jako hsl(217.2, 91.2%, 59.8%). Převodník dává výsledek s jedním desetinným místem, takže se tato hodnota převede zpět přesně na #3B82F6.
První krok samostatně zvládne převodník HEX na RGB a převodník RGB na HSL začíná rovnou od hodnot RGB.
Co je barevný model HSL?
HSL popisuje barvu třemi hodnotami. Odstín (anglicky hue) je úhel na barevném kole, kde 0° je červená, 120° zelená a 240° modrá. Sytost udává, kolik barvy je v odstínu: 0 % dá šedou a 100 % plnou barvu. Světlost (lightness) je 0 % pro černou a 100 % pro bílou a běžná barva leží na 50 %[1].
Specifikace CSS vysvětluje, k čemu tento zápis slouží. Z čísel RGB se těžko odhaduje, jak získat světlejší verzi stejné barvy, kdežto v HSL změníš jedinou hodnotu[1].
George Joblove a Donald Greenberg popsali model v srpnovém čísle časopisu Computer Graphics z roku 1978, vedle modelu HSV od Alvyho Raye Smithe[2]. Do CSS se dostal se specifikací CSS Color Module Level 3, která se 7. června 2011 stala doporučením W3C[3].
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.
Pojmenované barvy CSS: kód HEX a HSL
| Název v CSS | Kód HEX | HSL v CSS | HSL v Office (0–255) |
|---|---|---|---|
| black | #000000 | hsl(0, 0%, 0%) | 170, 0, 0 |
| white | #FFFFFF | hsl(0, 0%, 100%) | 170, 0, 255 |
| red | #FF0000 | hsl(0, 100%, 50%) | 0, 255, 128 |
| lime | #00FF00 | hsl(120, 100%, 50%) | 85, 255, 128 |
| blue | #0000FF | hsl(240, 100%, 50%) | 170, 255, 128 |
| yellow | #FFFF00 | hsl(60, 100%, 50%) | 42, 255, 128 |
| aqua | #00FFFF | hsl(180, 100%, 50%) | 127, 255, 128 |
| fuchsia | #FF00FF | hsl(300, 100%, 50%) | 213, 255, 128 |
| silver | #C0C0C0 | hsl(0, 0%, 75.3%) | 170, 0, 192 |
| gray | #808080 | hsl(0, 0%, 50.2%) | 170, 0, 128 |
| maroon | #800000 | hsl(0, 100%, 25.1%) | 0, 255, 64 |
| olive | #808000 | hsl(60, 100%, 25.1%) | 42, 255, 64 |
| green | #008000 | hsl(120, 100%, 25.1%) | 85, 255, 64 |
| purple | #800080 | hsl(300, 100%, 25.1%) | 213, 255, 64 |
| teal | #008080 | hsl(180, 100%, 25.1%) | 127, 255, 64 |
| navy | #000080 | hsl(240, 100%, 25.1%) | 170, 255, 64 |
| orange | #FFA500 | hsl(38.8, 100%, 50%) | 27, 255, 128 |
| rebeccapurple | #663399 | hsl(270, 50%, 40%) | 191, 128, 102 |
Čím se HSL liší od HSB a od stupnice Office?
| Kód HEX | HSL v CSS | HSB | HSL v Office (0–255) |
|---|---|---|---|
| #3B82F6 | hsl(217.2, 91.2%, 59.8%) | 217,2°; 76 %; 96,5 % | 154, 233, 153 |
| #EF4444 | hsl(0, 84.2%, 60.2%) | 0°; 71,5 %; 93,7 % | 0, 215, 154 |
| #22C55E | hsl(142.1, 70.6%, 45.3%) | 142,1°; 82,7 %; 77,3 % | 100, 180, 116 |
| #F59E0B | hsl(37.7, 92.1%, 50.2%) | 37,7°; 95,5 %; 96,1 % | 26, 235, 128 |
| #8B5CF6 | hsl(258.3, 89.5%, 66.3%) | 258,3°; 62,6 %; 96,5 % | 183, 228, 169 |
| #1E293B | hsl(217.2, 32.6%, 17.5%) | 217,2°; 49,2 %; 23,1 % | 154, 83, 45 |
| #FAFAFA | hsl(0, 0%, 98%) | 0°; 0 %; 98 % | 170, 0, 250 |
| #333333 | hsl(0, 0%, 20%) | 0°; 0 %; 20 % | 170, 0, 51 |
Kolik desetinných míst HSL potřebuje?
| Kód HEX | Výsledek převodníku | Stejné hodnoty zaokrouhlené | Barva ze zaokrouhlených hodnot |
|---|---|---|---|
| #3B82F6 | hsl(217.2, 91.2%, 59.8%) | hsl(217, 91%, 60%) | #3C83F6 |
| #EF4444 | hsl(0, 84.2%, 60.2%) | hsl(0, 84%, 60%) | #EF4343 |
| #22C55E | hsl(142.1, 70.6%, 45.3%) | hsl(142, 71%, 45%) | #21C45D |
| #F59E0B | hsl(37.7, 92.1%, 50.2%) | hsl(38, 92%, 50%) | #F59F0A |
| #8B5CF6 | hsl(258.3, 89.5%, 66.3%) | hsl(258, 90%, 66%) | #895AF6 |
| #1E293B | hsl(217.2, 32.6%, 17.5%) | hsl(217, 33%, 18%) | #1F2A3D |
style.color a přečetli pomocí getComputedStyle.Které zápisy kódu HEX tento převodník zvládne?
| Co zadáš | Výsledek převodníku | Jak to čteme |
|---|---|---|
| #3B82F6 | hsl(217.2, 91.2%, 59.8%) | Kód s křížkem, přesně v té podobě, v jaké stojí ve stylopisu |
| 3b82f6 | hsl(217.2, 91.2%, 59.8%) | Křížek není potřeba a malá písmena čteme stejně jako velká |
| #38F | hsl(215, 100%, 60%) | Třímístnou zkratku rozvineme sami: #38F čteme jako #3388FF |
| #3B82F680 | hsla(217.2, 91.2%, 59.8%, 0.5) | Poslední dva znaky jsou krytí — vezmeme je s sebou a výsledek dáme v podobě hsla |
| color: #3B82F6; | hsl(217.2, 91.2%, 59.8%) | Vlož celý řádek ze stylopisu nebo z nástrojů prohlížeče, kód z něj vytáhneme sami |
| "#3B82F6" | hsl(217.2, 91.2%, 59.8%) | Uvozovky ze souboru JSON nebo z JavaScriptu vynecháme a čteme jen kód |
| ##3B82F6 | hsl(217.2, 91.2%, 59.8%) | Dvojitý křížek, který vznikne vložením vedle už napsaného, nic nezkazí |
| #EF4444 | 0, 215, 154 | Když je přepínač Zápis na Microsoft Office, výsledek přijde ve stupnici 0–255, tedy v té z okna Barvy ve Wordu a Excelu |
Kde výsledek HSL použiješ?
Stylopisy a prohlížeče pracují se zápisem CSS a programy Office se stupnicí 0–255, proto před zkopírováním výsledku vyber v přepínači správný zápis.
Stylopis CSS
Vlož výsledek jako hodnotu vlastnosti, napříkladcolor: hsl(217.2, 91.2%, 59.8%);. CSS přijímá i tvar s mezerami a krytím za lomítkem:hsl(217.2 91.2% 59.8% / 50%)[1].Figma
Označ vrstvu a v pravém postranním panelu klikni na vzorek výplně. Pod posuvníky odstínu a krytí otevři seznam barevných modelů a vyber HSL[4].PowerPoint, Word a Excel
Označ obrazec, otevři Výplň obrazce a vyber Další barvy výplně[6]. Na kartě Vlastní přepni barevný model na HSL a zapiš tři čísla z Office do polí Odstín, Sytost a Světelnost.Chrome
Klikni pravým tlačítkem na prvek a vyber Prozkoumat. V panelu stylů klikni se stisknutou klávesou Shift na vzorek barvy a v seznamu, který se otevře, vyberhsl(X X X / X)[7]. Hodnota v panelu se pak přepne na HSL.
Převést jiné jednotky na HSL
Převést HEX na jiné jednotky
Zdroje
- CSS Color Module Level 4 — HSL Colors: hsl() and hsla() functions — W3C
- HSL and HSV — Wikipedie (anglicky)
- CSS Color Module Level 3 — HSL color values — W3C
- Update fills using the color picker — Figma Help Center
- 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
- Inspect and debug HD and non-HD colors with the Color Picker — Chrome for Developers
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: · napsal a zkontroloval tým Arteon
Časté otázky k převodu HEX na HSL
Který zápis HSL mám v převodníku vybrat?
Pro stylopisy a vývojářské nástroje prohlížeče vyber CSS. Microsoft Office (0–255) vyber, když barvu přenášíš do okna Barvy ve Wordu, Excelu nebo PowerPointu, protože tam má každá ze tří hodnot rozsah 0 až 255[5].
Proč se barva zadaná v Office vrátí s jiným kódem HEX?
Okno Barvy počítá HSL v celých číslech na stupnici od 0 do 255 a při tom se ztratí část přesnosti. Ověřili jsme to v Office 2016: #3B82F6 se tam zobrazí jako 154, 233 a 153 a tato tři čísla zadaná zpět dají #3C83F6. Převodník používá stejný algoritmus, takže ti ukáže přesně tu barvu, kterou uvidíš v programu. Čísla přečtená z okna zadáš do převodníku HSL na HEX se zápisem Office.
Jak zapsat barvu HSL s průhledností?
Zadej osmiznakový kód, například #3B82F680. Převodník pak dá hsla(217.2, 91.2%, 59.8%, 0.5), kde čtvrté číslo je krytí od 0 do 1[1]. Zápis Office dává jen tři čísla odstínu, sytosti a světlosti.
Proč mají žlutá a modrá v HSL stejnou světlost?
Světlost v HSL je průměr nejsilnějšího a nejslabšího kanálu, proto neodpovídá tomu, jak světlá se barva jeví oku. Specifikace CSS uvádí přesně tento příklad: hsl(60 100% 50%) i hsl(240 100% 50%) mají 50 %, a přesto žlutá působí mnohem světleji[1].
Jak v HSL získat světlejší odstín barvy?
Nech odstín a sytost beze změny a zvyš jen světlost. hsl(217.2, 91.2%, 59.8%) se světlostí 70 % dá #6DA2F8. Hotovou stupnici světlosti a převod libovolné hodnoty HSL na kód najdeš v převodníku HSL na HEX.
Má barva v HSL stejný kontrast jako v HEX?
Ano, protože oba zápisy popisují stejnou barvu a kontrast závisí na barvě. Vlož výsledek do kontroly kontrastu barev, která HSL přijme stejně jako 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.