HSL to RGB
Convert hue, saturation and lightness into the red, green and blue channels a screen actually uses.
- HEX
- #6467f2
- RGB
- rgb(100 103 242)
- HSL
- hsl(238.73 84.52% 67.06%)
- OKLCH
- oklch(0.5886 0.2039 277.18)
Most APIs that draw pixels — canvas, image libraries, LED strips — want three channel numbers, while the colour you settled on is probably written in HSL because that is the form you can reason about. This conversion sits between the two and is exact: nothing is lost going this direction.
How it is calculated
f(n) = L − a · max(−1, min(k − 3, 9 − k, 1)) where k = (n + H/30) mod 12, a = S · min(L, 1 − L)
The specification gives the conversion as a single function evaluated at three offsets — 0, 8 and 4 — producing red, green and blue. The clamping inside is what folds the hue circle into the six segments the older textbook formulations spell out case by case.
Questions people ask
- What does lightness 100% give?
- White, whatever the hue and saturation. At the top of the lightness scale every channel is already at maximum, so nothing else can influence the result.
- Are the channels whole numbers?
- The specification produces values in 0..1; this tool scales them to the 0..255 bytes that CSS and most graphics APIs expect, rounding to the nearest whole channel.
- Does alpha carry over?
- Yes. hsl(0 100% 50% / 0.5) becomes rgb(255 0 0 / 0.5) — the alpha value is passed through untouched.
Related tools
RGB to HSL
Convert red, green and blue channels into hue, saturation and lightness, the form that says what a colour actually is.
HSL to HEX
Turn hue, saturation and lightness into a hex code — useful when a colour was picked by feel and now has to go into a stylesheet or a design file.
HEX to RGB
Convert a hex colour to its red, green and blue channels, including the shorthand and alpha forms defined by the CSS specification.
Found a problem, or want more?
A number that disagrees with its source is a defect, not a rounding preference.
What did you enter, what did the tool show, and what did you expect instead? If you have a source that disagrees with ours, a link to it is the most useful thing you can send.
Opens your mail app with the page and tool already filled in.