Getting a chosen colour into a canvas
Pick the colour in HSL where it is easy, convert to RGB, and pass the channels to a drawing API.
Use HSL to RGB
Converts hsl colour to rgb in this tab, with nothing sent anywhere.
Runs entirely on your deviceThe conversion happens in this browser tab. Nothing you type is uploaded, logged or stored, which is worth knowing for anything you would not paste into a search box.
Explore general converters
Find related browser-local tools for nearby tasks without starting another search.
Browse all general convertersAbout HSL to RGB
HSL is the comfortable model for choosing and adjusting a colour, but the machinery underneath - canvases, graphics libraries, image buffers - almost always works in RGB. So once you have dialled in a colour as a hue, saturation and lightness, converting it to red, green and blue is how you get it into code that draws. The conversion is the inverse of the RGB-to-HSL formula and is exact up to rounding: a colour chosen in HSL produces a definite set of three channel values. This reads the three HSL components from whatever form they arrive in, applies the standard conversion, and returns the rgb() value ready to drop into a graphics call or a stylesheet.
Using HSL to RGB
- The hue, saturation and lightness are read from the input, tolerating percent signs and any spacing.
- Hue is wrapped into the 0-to-360 range and saturation and lightness are clamped to sensible bounds.
- The standard HSL-to-RGB conversion produces the three channel values.
- A saturation of zero short-circuits to a grey, avoiding needless computation.
- The result is written as rgb(r, g, b) with whole-number channels from 0 to 255.
Where hsl to rgb helps
Producing an rgb() value for CSS
Some tooling prefers explicit RGB. Convert your HSL and paste the result.
Check the saturation scale
HSL saturation and lightness are percentages, while the RGB result uses channel values from 0 to 255. Do not treat 0.5 as 50% unless the input explicitly accepts a fractional convention. Compare the resulting swatch on the intended background; a numeric conversion alone does not check text contrast.
Before you use the result
- Channels are rounded to whole numbers, matching how RGB is normally written and used.
- It produces opaque RGB; alpha is not handled here.
- Out-of-range saturation or lightness is clamped rather than rejected, since it has a sensible nearest value.
- It works in sRGB.
- This is a notation change; the colour is the same one you described in HSL.
Questions about HSL to RGB
Is the conversion exact?
Up to rounding to whole channels, yes. The formula is the exact inverse of RGB to HSL.
What input format works?
hsl() notation or three bare numbers. Percent signs on saturation and lightness are fine.
Does it handle alpha?
No. It produces opaque RGB. Add the alpha separately if you need rgba.
What if my values are out of range?
They are clamped to the nearest valid value rather than rejected.
Is my colour sent anywhere?
No. The conversion runs in this tab.
Related tools
RGB to HSL
Convert an RGB colour to HSL in your browser, the model that makes colours easy to adjust.
HSL to Hex
Convert an HSL colour to a hex code in your browser.
RGB to Hex
Convert an RGB colour to a hex code in your browser, from any common RGB format.