About HSL to RGB
HSL to RGB turns a hue, saturation and lightness triple into an rgb() string. The anchors behave as expected: hsl(0, 100, 50) comes back as rgb(255, 0, 0), hsl(120, 100, 25) as rgb(0, 128, 0) and hsl(240, 100, 50) as rgb(0, 0, 255). A hue above three hundred and sixty wraps around the circle, so hsl(400, 100, 50) gives the same answer as hsl(40, 100, 50), and a saturation of zero returns a grey with three equal channels.
The page is backed by a general color parser rather than one that only understands hsl, so hex, rgb() notation and the thirty standard color names all convert to rgb() here as well. For most people the practical use is the same either way: HSL is the easier space to reason about when adjusting a palette, while rgb() is what a canvas, a graphics library or an inline style attribute wants.
There is one important catch, and it concerns the notation. The numbers inside the brackets go through a plain numeric conversion that fails on the percent sign - the whole token becomes not-a-number rather than having its leading digits read - so the standard CSS spelling with percentages does not work - the sample the page itself ships with, hsl(243, 76%, 59%), returns rgb(NaN, NaN, NaN) instead of a color. Write the numbers bare, as hsl(243, 76, 59), and the conversion returns rgb(79, 71, 230) as intended. This is a limitation of the parser, not of the underlying arithmetic, and it is worth remembering because percentages are how HSL is normally written.
Out-of-range values are accepted without complaint. Saturation or lightness above one hundred is worked through rather than clamped, so hsl(0, 200, 50) prints rgb(383, -127, -127), with channels beyond two hundred and fifty-five and below zero that no display can show. An hsla() input is parsed too, but the alpha component is dropped - the answer is always a three-channel rgb() string - and there is no option to switch the output to hex or to see the value broken down per channel.
How to use HSL to RGB
- 1 Paste a color - hsl() without percent signs, hex, rgb() or a standard name are all understood.
- 2 The rgb() string appears immediately and is recalculated on each change.
- 3 Copy the result into a canvas call, a graphics library or an inline style.
- 4 If the answer comes back as NaN, remove the percent signs from the HSL numbers and try again.
Frequently asked questions
Why do I get rgb(NaN, NaN, NaN) from a value that looks correct?
Because of the percent signs. The parser converts each number with a routine that stops at the percent character, so 76% and 59% become not-a-number and the whole result follows. Write the numbers without percent signs - hsl(243, 76, 59) - and the conversion succeeds.
Can I pass a hex value or a color name instead?
Yes. The same parser accepts hex, rgb() notation and the standard color names, and every one of them comes back as an rgb() string. The title reflects the most common input rather than a restriction.
What happens if saturation or lightness is above 100?
It is used as given rather than clamped to the valid range, which can produce channels above 255 or below zero - values no screen can display. Keep both inside zero to one hundred for a usable color.
Does the alpha component survive?
No. An hsla() value is read, but the result is always a plain three-channel rgb() string, so the translucency is lost on the way through and the output format cannot be changed to include it.
Free, online, and private
Free to use
HSL to RGB is completely free. There is no account to create, no login, and no hidden charge or usage limit.
Runs online in your browser
It is a free online tool that runs entirely in your browser. Nothing to download or install — open the page and start using it right away.
Your data stays private
All processing happens locally on your device. Your input is never uploaded, stored, or tracked, so it never leaves your browser.
How HSL to RGB behaves in detail
These are the specifics of this implementation — the exact ranges, defaults and fixed settings you are working with.
| Parameter | Value |
|---|---|
| Input | one text panel, recalculated live; the sample reads hsl(243, 76%, 59%) |
| Working form | written without percent signs, as in hsl(243, 76, 59), the three numbers are read directly and the page returns rgb(79, 71, 230) |
| Grey branch | zero saturation returns a grey with three equal channels - hsl(0, 0, 50) becomes rgb(128, 128, 128) |
| Anchors | hsl(0, 100, 50) becomes rgb(255, 0, 0), hsl(120, 100, 25) becomes rgb(0, 128, 0) and hsl(240, 100, 50) becomes rgb(0, 0, 255) |
| Accepted input | the parser also accepts hex, thirty standard color names and rgb notation, so the page converts any common color string to rgb |
| Hue wrap | a hue above three hundred and sixty wraps around - hsl(400, 100, 50) gives the same answer as hsl(40, 100, 50) |
Compiled from the implementation of this tool and checked against it by itoolnet.
What HSL to RGB does not do
Knowing the edges of a tool saves more time than another list of its features. These are the cases where it will not do what you might expect.
- Percent signs are not stripped. The numbers inside the brackets go through a plain numeric conversion that fails on the percent sign - the whole token becomes not-a-number rather than having its leading digits read - so the standard CSS notation, including the sample text the page ships with, returns rgb(NaN, NaN, NaN) instead of a color. Write the numbers without percent signs to get a result.
- Out-of-range values are never clamped. Saturation and lightness above one hundred are accepted and worked through, so hsl(0, 200, 50) prints rgb(383, -127, -127) - channels beyond 255 and below zero - and a lightness of one hundred and fifty prints values past five hundred, none of which form a displayable color.
- The alpha part is read and then dropped. An hsla() input is parsed, but the answer is always a three-channel rgb() string, so the translucency is lost; the output format cannot be switched to hex either, and the result is a single line with no per-channel breakdown.
Tested and documented by itoolnet, the team that builds and maintains this site.