Převeď HSL na hodnoty RGB
Napiš hodnoty HSL a kanály RGB se zobrazují už během psaní: hsl(217.2, 91.2%, 59.8%) odpovídá rgb(59, 130, 246). Výsledek je vždy na stupnici od 0 do 255 a krytí z hsla zůstane v rgba. Se zápisem Office zadáš čísla z okna Barvy.
Zadej odstín ve stupních a sytost a světlost v procentech. Hodnoty odděl čárkami nebo mezerami.
Jak převést HSL na RGB?
Spočítej každý kanál zvlášť podle jednoho vzorce ze specifikace CSS. V tomto vzorci má červená číslo n rovné 0, zelená 8 a modrá 4[1]. Sytost a světlost do něj vstupují jako zlomky od 0 do 1.
Vzorec: k = (n + H ÷ 30) mod 12, a = S × min(L, 1 − L), kanál = L − a × max(−1, min(k − 3, 9 − k, 1)).
Vezmi hsl(0, 84.2%, 60.2%). Světlost 0,602 a sytost 0,842 dají a rovné 0,335. Pro červenou je k rovno 0, závorka tedy dá −1 a kanál vyjde 0,602 + 0,335, tedy 0,937.
Pro zelenou a modrou dá závorka 1. Oba kanály mají proto hodnotu 0,602 − 0,335, tedy 0,267. Po vynásobení 255 a zaokrouhlení vyjde rgb(239, 68, 68). Chromium 151, ve kterém jsme to vyzkoušeli, dá stejný výsledek.
Kód HEX této barvy dá převodník HSL na HEX. Převodník RGB na HSL počítá opačným směrem.
Jak se HSL přepočítá na kanály RGB?
Odstín určuje barvu na barevném kole, tedy které kanály RGB jsou silné a které slabé. Při 0° je nejsilnější červený kanál, při 120° zelený a při 240° modrý[1].
Sytost udává, jak daleko od sebe kanály jsou. Při 0 % jsou všechny tři stejné a barva je šedá. Světlost nastavuje úroveň všech kanálů najednou: při 0 % má každý 0, při 100 % každý 255 a při 50 % má barva svou běžnou podobu[1].
CSS má pro tento zápis dvě syntaxe. Ve starší oddělují hodnoty čárky a sytost se světlostí potřebují znak procenta. V novější hodnoty oddělují mezery, krytí následuje za lomítkem a sytost se světlostí se smí psát bez znaku procenta[1]. Převodník přečte obě, takže hsl(217.2 91.2 59.8) dá stejný výsledek jako hsl(217.2, 91.2%, 59.8%).
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 sytost mění hodnoty RGB?
hsl(217.2, 91.2%, 59.8%) po 10 bodech ze 100 % na 0 %. Odstín a světlost zůstávají stejné, takže vidíš, jak se rozdíl mezi kanály zmenšuje.| Sytost | HSL | Hodnoty RGB |
|---|---|---|
| 100 % | hsl(217.2, 100%, 59.8%) | 50, 128, 255 |
| 90 % | hsl(217.2, 90%, 59.8%) | 60, 130, 245 |
| 80 % | hsl(217.2, 80%, 59.8%) | 70, 133, 234 |
| 70 % | hsl(217.2, 70%, 59.8%) | 81, 135, 224 |
| 60 % | hsl(217.2, 60%, 59.8%) | 91, 138, 214 |
| 50 % | hsl(217.2, 50%, 59.8%) | 101, 140, 204 |
| 40 % | hsl(217.2, 40%, 59.8%) | 111, 143, 193 |
| 30 % | hsl(217.2, 30%, 59.8%) | 122, 145, 183 |
| 20 % | hsl(217.2, 20%, 59.8%) | 132, 148, 173 |
| 10 % | hsl(217.2, 10%, 59.8%) | 142, 150, 163 |
| 0 % | hsl(217.2, 0%, 59.8%) | 152, 152, 152 |
Jak zapsat odstín ve stupních, gradech, radiánech a otáčkách?
| Zápis CSS | Úhel ve stupních | Hodnoty RGB |
|---|---|---|
| hsl(90deg, 100%, 50%) | 90° | 128, 255, 0 |
| hsl(90, 100%, 50%) | 90° | 128, 255, 0 |
| hsl(100grad, 100%, 50%) | 90° | 128, 255, 0 |
| hsl(0.25turn, 100%, 50%) | 90° | 128, 255, 0 |
| hsl(1.5708rad, 100%, 50%) | 90,0002° | 127, 255, 0 |
| hsl(1.570796rad, 100%, 50%) | 89,99998° | 128, 255, 0 |
Které zápisy barvy v HSL tento převodník zvládne?
| Co zadáš | Výsledek převodníku | Jak to čteme |
|---|---|---|
| hsl(217.2, 91.2%, 59.8%) | rgb(59, 130, 246) | Zápis CSS s čárkami přijímáme beze změny |
| H 217.2 S 91.2 L 59.8 | rgb(59, 130, 246) | Písmena kanálů a chybějící procenta nevadí, čísla čteme podle pořadí |
| hsla(217,2, 91,2%, 59,8%, 0,5) | rgba(59, 130, 246, 0.5) | Desetinná čárka funguje i v krytí, nemusíš ji měnit na tečku |
| hsl(0.25turn, 100%, 50%) | rgb(128, 255, 0) | Odstín zadaný v otáčkách převedeme na stupně: 0.25turn je pro nás 90° |
| hsl(-120, 100%, 50%) | rgb(0, 0, 255) | Záporný odstín počítáme od konce barevného kola, stejně jako to dělá prohlížeč |
| hsl(0, 150%, 50%) | rgb(255, 0, 0) | Sytost nad 100 % omezíme na 100 %, stejně jako to dělá prohlížeč |
| color: hsl(217, 91%, 60%); | rgb(60, 131, 246) | Vlož celý řádek ze stylopisu, barvu z něj vytáhneme sami |
| 154, 233, 153 | rgb(60, 131, 246) | 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 |
Kam zadat výsledek RGB?
Dokumenty Google a okno Office přijmou hodnoty RGB přímo z převodníku, zatímco kód často potřebuje výsledek ve zlomcích.
Dokumenty, Tabulky a Prezentace Google
Na liště klikni na Barva textu nebo jiný nástroj s barevnými možnostmi a v části Vlastní klikni na Přidat vlastní barvu. V okně, které se otevře, zadáš hexadecimální kód nebo hodnotu RGB[3].Okno Barvy v Office
Na kartě Vlastní nech barevný model na RGB a zapiš tři čísla do polí Červená, Zelená a Modrá[4]. V našem testu v Office 2016 tato pole přijímala hodnoty od 0 do 255.Python
colorsys.hls_to_rgb(h, l, s)bere světlost před sytostí a všechny tři hodnoty jako zlomky od 0 do 1[5]. I výsledek je ve zlomcích, proto každý kanál vynásob 255, aby odpovídal převodníku.JavaScript
Specifikace CSS obsahuje hotovou funkcihslToRgb(hue, sat, light), která bere odstín ve stupních a sytost se světlostí od 0 do 100[1]. Vrací kanály od 0 do 1 a převodník používá stejný vzorec.
Převést jiné jednotky na RGB
Převést HSL na jiné jednotky
Zdroje
- CSS Color Module Level 4 — Converting HSL Colors to sRGB — W3C
- CSS Values and Units Module Level 4 — Angle Units — W3C
- Změna barvy textu, objektů a pozadí — Nápověda Editory Dokumentů
- Vybírání barev v dialogovém okně Barvy — Microsoft Support
- colorsys — Conversions between color systems — Python Software Foundation
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 HSL na RGB
Proč výsledek RGB převedený zpět dá trochu jinou hodnotu HSL?
Kanály RGB berou jen celá čísla, proto několik hodnot HSL dá stejnou barvu. hsl(217, 91%, 60%) dá rgb(60, 131, 246) a tato barva převedená zpět je hsl(217.1, 91.2%, 60%). Obě popisují na obrazovce přesně stejnou barvu.
Jak převést na RGB čísla z okna Barvy v Office?
Vyber zápis Microsoft Office (0–255) a zadej tři čísla z okna. Hodnoty 154, 233 a 153 dají rgb(60, 131, 246), protože okno počítá HSL na stupnici od 0 do 255[4] a ztratí část přesnosti. Čísla zadej až po přepnutí, protože barvu, která už v poli je, přepínač přepíše na tutéž barvu v novém zápisu.
Můžu zadat sytost a světlost bez znaku procenta?
Ano. Převodník čte samotná čísla stejně jako novější syntaxe CSS, takže 217.2 91.2 59.8 dá rgb(59, 130, 246)[1].
Jak získat kanály RGB jako zlomky od 0 do 1?
Převeď hodnotu HSL na kód v převodníku HSL na HEX a ten kód zadej do převodníku HEX na RGB s přepínačem na 0–1. Pro hsl(217.2, 91.2%, 59.8%) dostaneš 0,2314, 0,5098 a 0,9647.
Ukáže prohlížeč stejnou barvu jako převodník?
Ano. Vyzkoušeli jsme to v Chromiu 151 na všech 16 777 216 barvách: hodnoty HSL z našich převodníků daly v prohlížeči přesně ty kanály RGB, ze kterých jsme vyšli.
Jak v RGB nastavit barvu s průhledností?
Přidej k hodnotě HSL krytí, například hsla(217.2, 91.2%, 59.8%, 0.5). Převodník dá rgba(59, 130, 246, 0.5) a čtvrté číslo zůstane stejné.
Pomoz nám vylepšit naše nástroje
Máš nápad, vidíš chybu nebo chceš navrhnout nový nástroj? Napiš nám.