Toolsloft

HSL to RGB Converter

Convert HSL (hue, saturation, lightness) color values to RGB. Free, instant, and private.

Independently verified for accuracy

Calculator by Toolsloft ↗
RGB
rgb(51, 102, 204)

Convert an HSL color back to RGB values for use anywhere that expects red, green, and blue. Enter hue in degrees and saturation and lightness in percent, then copy the rgb() result. Useful when a design tool gives you HSL but your code needs RGB.

How this is calculated

The formula derives a chroma value from saturation and lightness, places it on the color wheel by hue, then adds the lightness offset to each channel. This is the standard HSL to RGB conversion defined by CSS Color.

How to use

  1. Enter hue (0 to 360), saturation (0 to 100), and lightness (0 to 100).
  2. The RGB value appears below as you type.
  3. Copy the rgb() result into your code.

Examples

  • 220, 60, 50: rgb(51, 102, 204)
  • 0, 100, 50: rgb(255, 0, 0)

FAQ

What ranges do the inputs use?
Hue is an angle from 0 to 360 degrees, while saturation and lightness are percentages from 0 to 100.
Does converting to RGB and back give the same HSL?
Not always exactly. Both directions round to whole numbers, so a round trip can shift a value by one unit. The visible color is effectively identical.
What lightness gives the purest color?
A lightness of 50 percent with full saturation gives the most vivid version of a hue. Higher lightness moves toward white, lower toward black.

Embed this calculator

Add this free calculator to your own site. Copy the code and paste it where you want it to appear.

Related tools