HSL to RGB

Convert hue, saturation and lightness into the red, green and blue channels a screen actually uses.

RGBrgb(100 103 242)
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.

Source: W3C CSS Color Module Level 4 §7.1 — converting HSL colors to sRGB, returning components which for in-gamut colors are in the range [0, 1]

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.

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.

Write to us

Opens your mail app with the page and tool already filled in.

Related tools