HSL to RGB Converter

How to use the hsl to rgb converter

1. Enter the hue as a number from 0 to 360 degrees.
2. Set the saturation percentage from 0 (gray) to 100 (full color).
3. Set the lightness percentage from 0 (black) to 100 (white).
4. Read the resulting rgb() string, individual channel values and HEX code below.

How the HSL to RGB conversion works

The HSL model describes colors using hue (an angle on the color wheel), saturation (intensity) and lightness (brightness). To convert HSL to RGB, the algorithm first normalizes saturation and lightness to fractions between 0 and 1.

It then calculates a chroma value: C = (1 - |2L - 1|) x S. An intermediate value X = C x (1 - |(H / 60) mod 2 - 1|) determines the secondary color component. A match value m = L - C / 2 shifts the result to the correct lightness. Depending on which 60-degree sector the hue falls into, the R, G and B channels are assigned combinations of C, X and 0, then m is added to each and the result is multiplied by 255 and rounded.

For example, an HSL value of 210, 50%, 50% gives C = 0.5, X = 0.25 and m = 0.25. Since hue 210 falls in the 180 to 240 sector, the raw values are (0, X, C) which becomes (0.25, 0.5, 0.75) after adding m. Multiplied by 255 and rounded, this yields R=64, G=128, B=191.

Common HSL to RGB reference values

This table shows standard colors converted from HSL to RGB for quick reference.

Why use HSL instead of RGB or HEX

CSS supports several color formats. While you can always convert RGB to HEX or convert HEX to RGB, HSL offers practical advantages when designing interfaces. Hue maps directly to the color wheel, making it intuitive to pick a base color. Saturation controls how vivid or muted that color appears, and lightness lets you create tints and shades without changing the underlying hue.

When building a design system, you might fix the hue and saturation and generate a palette by varying lightness from 10% to 90%. Doing this in pure RGB requires trial and error because changing one channel shifts both the perceived color and brightness simultaneously. With HSL, generating consistent palettes is straightforward arithmetic.

If you need to move between other formats, tools like HEX to HSL or HSL to HEX handle those conversions directly.

Handling edge cases in color conversion

A few edge cases matter when you convert HSL to RGB. When saturation is 0%, the color is a shade of gray regardless of the hue value. The formula naturally handles this because chroma becomes zero, leaving all three channels equal to the lightness fraction times 255.

When lightness is 0%, the result is always pure black (0, 0, 0). When lightness is 100%, the result is always pure white (255, 255, 255). In both cases, saturation and hue have no effect on the output.

Hue values outside the 0 to 360 range should be wrapped using modulo arithmetic. For instance, a hue of 400 degrees is equivalent to 40 degrees. However, this converter validates inputs strictly and asks you to provide a hue within the standard range to avoid ambiguity.

Using the output in CSS and design tools

The rgb() string produced by this HSL to RGB converter can be used directly in CSS properties like color, background-color and border-color. Modern browsers also support the space-separated syntax rgb(255 0 0) without commas, but the comma format remains universally compatible.

The HEX output is useful when working with design tools such as Figma or Sketch, which often display colors in hexadecimal notation. If you later need to convert back, you can use RGB to HSL to recover the original hue, saturation and lightness values.

For print workflows that require CMYK values, you can take the RGB output and pass it through a CMYK to RGB tool in reverse, or use dedicated profile-based conversion software for accurate results.

Worked examples