Přejít na výběr barvy

Převodník HSL na RGBA

Vložte hodnotu HSL a hned dostanete RGBA. Funguje i jakýkoli jiný formát.

Rozpoznáno jako HSL

Hodnota RGBArgba(255, 87, 51, 1)
RGBA na HSL

Upravit barvu

11°
100 %

68 %
0,210
34°

Všechny ostatní formáty

Tabulka krytí: alfa v HEX a RGBA

V osmimístném HEX určují krytí poslední dvě číslice: FF je plně krycí, 80 je asi 50 %, 00 je zcela průhledné. Tabulka ukazuje ukázkovou barvu po 5 %.

KrytíAlfa v HEXHEXRGBA
100%ff#ff5733rgba(255, 87, 51, 1)
95%f2#ff5733f2rgba(255, 87, 51, 0.95)
90%e6#ff5733e6rgba(255, 87, 51, 0.9)
85%d9#ff5733d9rgba(255, 87, 51, 0.85)
80%cc#ff5733ccrgba(255, 87, 51, 0.8)
75%bf#ff5733bfrgba(255, 87, 51, 0.75)
70%b3#ff5733b3rgba(255, 87, 51, 0.7)
65%a6#ff5733a6rgba(255, 87, 51, 0.65)
60%99#ff573399rgba(255, 87, 51, 0.6)
55%8c#ff57338crgba(255, 87, 51, 0.55)
50%80#ff573380rgba(255, 87, 51, 0.5)
45%73#ff573373rgba(255, 87, 51, 0.45)
40%66#ff573366rgba(255, 87, 51, 0.4)
35%59#ff573359rgba(255, 87, 51, 0.35)
30%4d#ff57334drgba(255, 87, 51, 0.3)
25%40#ff573340rgba(255, 87, 51, 0.25)
20%33#ff573333rgba(255, 87, 51, 0.2)
15%26#ff573326rgba(255, 87, 51, 0.15)
10%1a#ff57331argba(255, 87, 51, 0.1)
5%0d#ff57330drgba(255, 87, 51, 0.05)
0%00#ff573300rgba(255, 87, 51, 0)

Příklady převodu HSL na RGBA

BarvaHSLRGBA
hsl(0, 100%, 50%)rgba(255, 0, 0, 1)
hsl(120, 100%, 50%)rgba(0, 255, 0, 1)
hsl(240, 100%, 50%)rgba(0, 0, 255, 1)
hsl(0, 0%, 100%)rgba(255, 255, 255, 1)
hsl(0, 0%, 0%)rgba(0, 0, 0, 1)
hsl(0, 0%, 50.2%)rgba(128, 128, 128, 1)
hsl(10.59, 100%, 60%)rgba(255, 87, 51, 1)
hsl(217.22, 91.22%, 59.8%)rgba(59, 130, 246, 1)
hsl(160.12, 84.08%, 39.41%)rgba(16, 185, 129, 1)
hsl(37.69, 92.13%, 50.2%)rgba(245, 158, 11, 1)
hsl(258.31, 89.53%, 66.27%)rgba(139, 92, 246, 1)
hsl(330.37, 81.19%, 60.39%)rgba(236, 72, 153, 1)

O formátech HSL a RGBA

HSL udává tón ve stupních a sytost a světlost v procentech. Snadno se čte, ale jeho světlost neodpovídá vnímání: žlutá na 50 % vypadá mnohem světleji než modrá na 50 %.

RGBA je RGB s alfa kanálem pro krytí, zapsané jako rgba(255, 87, 51, 0.5). Alfa jde od 0 (zcela průhledné) do 1 (plně krycí). Stejné krytí lze zapsat osmimístným HEX, například #ff573380.

Jak převod funguje

Hodnotu HSL načteme, pomocí matic ze specifikace CSS Color 4 ji převedeme do CIE XYZ a potom do RGBA. Hodnoty mimo cílový gamut mapuje algoritmus CSS Color 4, který zachová světlost a tón a sníží chromu.

Otázky a odpovědi

Jak převést HSL na RGBA?

Vložte nebo napište hodnotu HSL do pole výše. PickShade ji už během psaní převede podle vzorců CSS Color 4 a hodnotu RGBA zkopírujete jedním kliknutím.

Je převod HSL na RGBA přesný?

Výpočet je přesný a výsledek se zaokrouhluje jen pro zobrazení, a to na tolik míst, aby šel převést zpět na stejnou barvu. Když se barva do cílového gamutu nevejde, PickShade vás upozorní a ukáže nejbližší barvu, která se vejde.

Lze získat i další formáty zároveň?

Ano. Všechny ostatní formáty včetně OKLCH, Display P3, Tailwind, SwiftUI, Flutter a Android jsou vypsané pod výsledkem a zkopírujete je jedním kliknutím.

Je tento převodník zdarma?

Ano. Je zdarma, nevyžaduje registraci a běží celý ve vašem prohlížeči.