IZN Tools

HSL to RGB Converter

Back to channels for anything that will not take hsl().

#FF5833no CSS keyword
RGBrgb(255, 88, 51)
HEX#FF5833
HSLhsl(11, 100%, 60%)
HSVhsv(11, 80%, 100%)
CMYKcmyk(0%, 65%, 80%, 0%)
Name
Read as HSLCMYK is the naive formula every converter uses — an orientation, not a print specification.
Computed on this device

Where channels are required

CSS has taken hsl() for years, but plenty of things around it have not: canvas pixel arrays, most image libraries, native mobile colour types, and a good number of APIs that want three integers.

The arithmetic, briefly

Hue picks a face of the colour wheel; saturation and lightness scale a chroma value and shift it. The output is three integers 0–255, rounded — which is why converting RGB → HSL → RGB can move a channel by one.

Out-of-range input

Hue wraps: -120 is 240. Saturation and lightness clamp: anything above 100 is 100. This matches CSS, so the numbers here are what the browser would use.

Questions

Why would I need RGB if CSS takes hsl()?+

Because plenty of things around CSS do not: canvas pixel arrays, most image libraries, native mobile colour types and many APIs all want three integers.

What happens to hsl(-120, …)?+

Hue wraps, so it is the same as 240. Saturation and lightness clamp instead of wrapping, which is what CSS does too.

Are the channels rounded?+

Yes, to whole numbers 0–255. That rounding is why RGB → HSL → RGB can shift a channel by one.