Převeď hodnoty RGB na HSL
Napiš tři kanály RGB a hodnoty HSL se zobrazují už během psaní: rgb(59, 130, 246) odpovídá hsl(217.2, 91.2%, 59.8%). Pole přijme čísla se závorkami i bez nich a pozná kanály zapsané jako zlomky od 0 do 1. Přepínač ti dá zápis CSS nebo stupnici Office.
Jak převést RGB na HSL?
Vyděl každý kanál číslem 255 a najdi největší a nejmenší z nich. Světlost je průměr těchto dvou hodnot. Sytost vychází z jejich rozdílu a odstín z toho, který kanál je nejsilnější[1].
Vzorec: Δ = max − min, L = (max + min) ÷ 2, S = Δ ÷ (1 − |2L − 1|), a když je nejsilnější červený kanál, H = 60° × ((G − B) ÷ Δ).
Vezmi rgb(239, 68, 68). Po vydělení 255 má červená 0,937, zelená a modrá po 0,267. Průměr 0,937 a 0,267 je 0,602, světlost je tedy 60,2 %. Jejich rozdíl 0,671 dá sytost 84,2 %.
Zelená a modrá jsou tu stejné, proto je odstín přesně 0°. Celá barva zní hsl(0, 84.2%, 60.2%). Když je nejsilnější zelený kanál, odstín se počítá od 120°, a proto rgb(34, 197, 94) dá hsl(142.1, 70.6%, 45.3%).
Kódy HEX těchto barev dá převodník RGB na HEX. Pokud začínáš od kódu, použij převodník HEX na HSL.
Čím se HSL liší od RGB?
RGB popisuje barvu množstvím červeného, zeleného a modrého světla, které obrazovka skládá do pixelu. HSL popisuje stejnou barvu odstínem, množstvím barvy a světlostí. Specifikace CSS upozorňuje, že z čísel RGB se těžko odhaduje, jak barvu zesvětlit a zachovat přitom její odstín[1].
Oba zápisy pokrývají stejný prostor sRGB. Barvu zapsanou v CSS jako HSL prohlížeč převede do sRGB[1], proto jde každou barvu HSL zapsat jako tři kanály RGB a naopak.
Autoři modelu, George Joblove a Donald Greenberg, pojmenovali jeho rozměry v roce 1978 jinak: hue, relative chroma a intensity[2]. Specifikace CSS jim říká hue, saturation a lightness, česky odstín, sytost a světlost[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é hodnoty HSL mají šedé barvy RGB?
| Hodnoty RGB | Kód HEX | HSL v CSS | HSL v Office (0–255) |
|---|---|---|---|
| 0, 0, 0 | #000000 | hsl(0, 0%, 0%) | 170, 0, 0 |
| 32, 32, 32 | #202020 | hsl(0, 0%, 12.5%) | 170, 0, 32 |
| 64, 64, 64 | #404040 | hsl(0, 0%, 25.1%) | 170, 0, 64 |
| 96, 96, 96 | #606060 | hsl(0, 0%, 37.6%) | 170, 0, 96 |
| 128, 128, 128 | #808080 | hsl(0, 0%, 50.2%) | 170, 0, 128 |
| 160, 160, 160 | #A0A0A0 | hsl(0, 0%, 62.7%) | 170, 0, 160 |
| 192, 192, 192 | #C0C0C0 | hsl(0, 0%, 75.3%) | 170, 0, 192 |
| 224, 224, 224 | #E0E0E0 | hsl(0, 0%, 87.8%) | 170, 0, 224 |
| 255, 255, 255 | #FFFFFF | hsl(0, 0%, 100%) | 170, 0, 255 |
Jak zapsat barvu RGB s krytím v HSL?
rgba() je čtvrté číslo v hsla(). Tabulka ukazuje sedm hodnot krytí pro rgb(59, 130, 246) spolu s kódem HEX, ve kterém krytí zabírá poslední dvě číslice.| Krytí | rgba | hsla | Kód HEX |
|---|---|---|---|
| 100 % | rgba(59, 130, 246, 1) | hsl(217.2, 91.2%, 59.8%) | #3B82F6 |
| 90 % | rgba(59, 130, 246, 0.9) | hsla(217.2, 91.2%, 59.8%, 0.9) | #3B82F6E6 |
| 75 % | rgba(59, 130, 246, 0.75) | hsla(217.2, 91.2%, 59.8%, 0.75) | #3B82F6BF |
| 50 % | rgba(59, 130, 246, 0.5) | hsla(217.2, 91.2%, 59.8%, 0.5) | #3B82F680 |
| 25 % | rgba(59, 130, 246, 0.25) | hsla(217.2, 91.2%, 59.8%, 0.25) | #3B82F640 |
| 10 % | rgba(59, 130, 246, 0.1) | hsla(217.2, 91.2%, 59.8%, 0.1) | #3B82F61A |
| 0 % | rgba(59, 130, 246, 0) | hsla(217.2, 91.2%, 59.8%, 0) | #3B82F600 |
hsl(), protože plné krytí je výchozí hodnota.Jak převést na HSL kanály zapsané jako zlomky od 0 do 1?
| Kanály 0–1 | HSL v CSS | HSL v Office (0–255) |
|---|---|---|
| 0.2314, 0.5098, 0.9647 | hsl(217.2, 91.2%, 59.8%) | 154, 233, 153 |
| 0.1333, 0.7725, 0.3686 | hsl(142.1, 70.6%, 45.3%) | 100, 180, 116 |
| 0.5, 0.5, 0.5 | hsl(0, 0%, 50.2%) | 170, 0, 128 |
| 1.0, 0, 0 | hsl(0, 100%, 50%) | 0, 255, 128 |
1, 0, 0 obsahuje jen celá čísla, proto ji převodník čte na stupnici 0–255. 1.0, 0, 0 značí zlomky a dá plnou červenou.Které zápisy hodnot RGB tento převodník zvládne?
| Co zadáš | Výsledek převodníku | Jak to čteme |
|---|---|---|
| rgb(59, 130, 246) | hsl(217.2, 91.2%, 59.8%) | Zápis CSS se závorkou přijímáme beze změny |
| 59 130 246 | hsl(217.2, 91.2%, 59.8%) | Stačí tři čísla oddělená mezerami, závorky ani čárky nejsou potřeba |
| R: 59, G: 130, B: 246 | hsl(217.2, 91.2%, 59.8%) | Písmena kanálů, jak je píše manuál značky, vynecháme a vezmeme jen čísla |
| rgb(23.1%, 51%, 96.5%) | hsl(217.2, 91.2%, 59.8%) | Kanály zadané v procentech přepočítáme na stupnici 0–255 sami |
| rgba(59, 130, 246, 0,5) | hsla(217.2, 91.2%, 59.8%, 0.5) | Krytí napsané s desetinnou čárkou přeneseme do výsledku v podobě hsla |
| 0,2314 0,5098 0,9647 | hsl(217.2, 91.2%, 59.8%) | Kanály zapsané jako zlomky od 0 do 1 poznáme podle čárky a přepočítáme na stupnici 0–255 |
| [59, 130, 246] | hsl(217.2, 91.2%, 59.8%) | Pole NumPy, které vypíše Python, přečteme i s hranatými závorkami |
| background-color: rgb(59, 130, 246); | hsl(217.2, 91.2%, 59.8%) | Vlož celý řádek ze stylopisu, barvu z něj vytáhneme sami |
| 300, -20, 128 | hsl(329.9, 100%, 50%) | Hodnoty mimo rozsah omezíme stejně jako prohlížeč: 300 na 255 a −20 na 0 |
Jak převést RGB na HSL v kódu, v CSS a v Office?
Python, CSS i Office umí převést RGB na HSL samy. Každý z nich ale zapisuje výsledek jinak, proto tu najdeš, jak ho v každém případě číst.
Python
colorsys.rgb_to_hls(r, g, b)bere kanály od 0 do 1 a vrací odstín, světlost a sytost v tomto pořadí[3]. Pro#3B82F6je odstín 0,6034. Jde o část celé otáčky, takže po vynásobení 360 vyjde 217,2°.CSS
S relativní syntaxíhsl(from rgb(59 130 246) h s calc(l + 10))převede RGB na HSL sám prohlížeč a zvýší světlost o 10 bodů[4]. Tuto syntaxi jsme vyzkoušeli v Chromiu 151.Okno Barvy v Office
Zadej kanály při barevném modelu RGB a potom model přepni na HSL. Okno ukáže odstín, sytost a světlost na stupnici od 0 do 255[5], tedy stejná čísla, jaká převodník dá v zápisu Microsoft Office (0–255).
Převést jiné jednotky na HSL
Převést RGB na jiné jednotky
Zdroje
- CSS Color Module Level 4 — Converting sRGB Colors to HSL — W3C
- HSL and HSV — Wikipedie (anglicky)
- colorsys — Conversions between color systems — Python Software Foundation
- Using relative colors — MDN Web Docs
- Vybírání barev v dialogovém okně Barvy — Microsoft Support
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 RGB na HSL
Můžu zadat kanály RGB v procentech?
Ano. Převodník přepočítá procenta na stupnici 0–255, takže rgb(23.1%, 51%, 96.5%) dá stejný výsledek jako rgb(59, 130, 246), tedy hsl(217.2, 91.2%, 59.8%).
Proč getComputedStyle vrací rgb, když jsem v CSS napsal hsl?
Prohlížeč při výpočtu stylu převede barvu HSL do sRGB a vypočtenou hodnotu zapíše jako rgb() nebo rgba()[1]. Pokud chceš znovu vidět HSL, převeď tento výsledek tady.
Proč colorsys v Pythonu používá jiné pořadí než CSS?
Modul colorsys tento model nazývá HLS a světlost vrací před sytostí[3]. Hodnoty (0.6034, 0.598, 0.912) tedy znamenají odstín 217,2°, světlost 59,8 % a sytost 91,2 %, v CSS zapsané jako hsl(217.2, 91.2%, 59.8%).
Jak převést HSL zpět na RGB?
Zadej hodnotu do převodníku HSL na RGB. Tlačítko Prohodit pořadí tě tam přenese i s aktuálním výsledkem.
Má šedá barva v HSL odstín?
Při sytosti 0 % odstín barvu nemění[1], proto převodník v zápisu CSS dá nulu. Okno Barvy v Office na toto místo dává 170 a barva vyjde stejná.
Jak ověřit, že je barva RGB na pozadí čitelná?
Vlož hodnoty RGB nebo výsledek HSL do kontroly kontrastu barev. Ukáže kontrastní poměr spolu s prahy WCAG pro text.
Pomoz nám vylepšit naše nástroje
Máš nápad, vidíš chybu nebo chceš navrhnout nový nástroj? Napiš nám.