HSL to RGB

What this tool is used for

• Converting an HSL theme value into RGB for a tool that needs channels.
• Producing RGB for a canvas or an image operation.
• Getting channel values from a hue-based exploration.
• Comparing an HSL colour against an RGB palette.
• Producing a value for a context that will not accept HSL.

Frequently Asked Questions

How does the conversion actually work?

Lightness and saturation give a chroma — the distance between the brightest and darkest channel — the hue picks which 60° sector the colour falls in, and a lightness offset lifts all three channels together. It is the inverse of the max/min arithmetic that produced the HSL.

Why do some HSL values produce the same RGB?

Because the space is not one-to-one at the extremes. At lightness 0% or 100% every hue and saturation gives black or white, and at 0% saturation every hue gives the same grey — so many HSL triples map onto one RGB colour.

Do I still need this if CSS accepts hsl() directly?

Often, yes: canvas APIs, most image libraries, LED and light-strip protocols, and anything doing colour arithmetic all want RGB numbers. HSL is the good format for *choosing* a colour and RGB is what most code consumes.

Is a 50% lightness colour always mid-brightness?

No — that is HSL's central flaw. Yellow at 50% lightness is far brighter to the eye than blue at 50%, because the model ignores how sensitive human vision is to each wavelength. Use OKLCH when steps need to look evenly spaced.

Why does a converted value come back slightly different?

Rounding. HSL is usually written in whole degrees and whole percentages, which cannot address all 16.7 million sRGB colours, so a round trip can shift a channel by one. Keep the RGB or hex as the canonical value.

Why can two different HSL values give the same RGB?

Because the conversion is not injective at the extremes — at 0% or 100% lightness every hue and saturation collapses to black or white. Round-tripping such a colour does not return the values you started with.

Common errors and gotchas

• Expecting round channel numbers, since most HSL values do not produce them.
• Assuming hue 0 and 360 differ, when they are identical.
• Losing alpha unless the four-part forms are used on both sides.
• Reading a zero-saturation colour's hue as meaningful, which it is not.
• Rounding at lightness extremes, where the same rounding shifts the colour more.