HSL to RGB Converter
Turn hue, saturation and lightness back into plain red, green and blue values for code, canvas work or any tool that expects RGB.
Example conversion
hsl(348, 83%, 47%)
converts to
rgb(220, 20, 60)
About HSL to RGB conversion
HSL is where colors get designed; RGB is where they get used. You pick a
hue, dial in saturation and lightness until the color is right - and then
something downstream wants three plain channel numbers instead. A canvas
API, a shader, a spreadsheet, a game engine, an LED strip or an older piece
of software that never learned what hsl() means. This
conversion turns those design coordinates back into red, green and blue.
Nothing is approximated. HSL and RGB describe exactly the same set of colors, so the conversion is a geometric transformation rather than a translation between color spaces. Whatever you can express in HSL has a precise RGB equivalent.
When should you use HSL to RGB?
- Implementing a palette in code - design tokens defined in HSL that a canvas or WebGL routine needs as channels.
- Feeding tools without HSL support - many editors, engines and embedded systems only accept RGB.
- Generating colors programmatically - stepping around the hue wheel to produce chart series or avatar colors, then emitting RGB.
- Blending or compositing - arithmetic on colors is done per channel, so HSL has to become RGB first.
- Documenting a color properly - listing RGB alongside the HSL a designer handed over.
How the conversion works
Saturation and lightness are scaled to 0-1. The chroma - the color's
distance from grey - is C = (1 - |2L - 1|) x S. The hue angle
is divided into six 60-degree sectors, which decide which channel is at the
top, which is climbing and which is at the bottom. An intermediate value
X = C x (1 - |(H / 60 mod 2) - 1|) fills in the climbing
channel. Finally a match value m = L - C / 2 is added to all
three to lift them to the right lightness, and each result is multiplied by
255.
The sector logic is why the primaries land on round numbers: hue 0 is pure red, 120 pure green, 240 pure blue. Hue wraps around, so 360 and 0 are the same angle, and saturation 0 collapses the whole formula to a grey at the given lightness regardless of hue.
HSL vs RGB
- Purpose - HSL is for choosing and adjusting colors; RGB is for rendering them.
- Units - one angle in degrees plus two percentages, versus three integers from 0 to 255.
- Predictability - adding 10% lightness in HSL always reads as lighter; adding 25 to each RGB channel does not always behave the way you expect.
- Compatibility - RGB is universally supported; HSL support depends on the tool.
- Same colors - both cover the identical sRGB gamut, so the conversion never has to compromise.
Named CSS colors in HSL and RGB
The sixteen basic CSS color keywords plus eight more that come up constantly, each shown in both models side by side. Pick any row to drop that color into the converter and read it in the other eight models too.
Frequently asked questions
What hue should I use for a grey?
Any - it makes no difference. With saturation at 0%, the formula produces the same grey no matter what the hue angle says. By convention it is written as 0.
Why does 50% lightness give me the pure color?
That is how HSL is defined: lightness runs from black at 0% through the fully saturated hue at 50% to white at 100%. If you want a model where the brightest version of a hue sits at the top of the scale, you are thinking of HSV - see HSV to RGB.
Do hue values above 360 work?
Hue is an angle, so it wraps: 380 degrees is the same as 20. This converter accepts values from 0 to 360 and treats the two ends as the same red.
Can I convert back to HSL afterwards?
Yes, with the RGB to HSL converter. Because HSL values are rounded for readability, a round trip may shift a number by one - visually identical, though not always numerically exact.
Is hsl() slower than rgb() in a browser?
No. Both are parsed once when the stylesheet loads, and the browser works in its own internal representation afterwards. Pick whichever makes your code easier to read and maintain.