What is an HSL to RGB converter?
An HSL to RGB converter changes hue, saturation, and lightness into red, green, and blue display channels. RGB output is useful for CSS, Canvas, graphics libraries, and data formats that expect channel values.
How to convert HSL to RGB
- Enter
hsl(10.6 100% 60%)or the same three raw HSL channels. - Check the preview and the
0–255, normalized, and percentage RGB values. - Copy the RGB format required by your code or design tool.
HSL to RGB example
For hsl(10.6 100% 60%), the conversion calculates chroma from saturation and lightness, positions that chroma in the hue segment, and adds a lightness offset:
hsl(10.6 100% 60%) → rgb(255, 87, 51)Fractional RGB channels are rounded to the nearest integer.
HSL boundaries
Hue wraps every 360 degrees. With 0% saturation, all three RGB channels are equal. 0% lightness always produces rgb(0, 0, 0), while 100% lightness produces rgb(255, 255, 255).
HSL vs. RGB
HSL is convenient for describing and adjusting a color. RGB maps directly to the three sRGB display channels and is often easier to pass to graphics APIs. Both can describe the same opaque color.
Use the RGB to HSL Converter for the reverse direction. Use HSL to HEX Converter for a compact hexadecimal result.
HSL to RGB FAQ
What HSL input formats are accepted?
Use hsl(H S% L%), the comma-separated CSS form, or three raw comma- or space-separated channels. Hue may include deg.
Can hue be negative or greater than 360?
Yes. Hue is wrapped around the color wheel before conversion.
Why are RGB channels rounded?
The HSL formula can produce fractional channel values, while the standard RGB output shown here uses integers from 0 to 255.
What happens when saturation is zero?
The output is gray, with equal red, green, and blue channels. Hue has no visible effect in that state.
Why is hsla() rejected?
HSLA includes transparency. Plain RGB cannot preserve alpha, so this converter does not silently discard it.