HSL to RGB Color Converter

The R, G, B values in the output show the red, green, and blue channel intensities on a 0-255 scale. You can use these values directly in CSS as rgb(R, G, B) or in image editing software.

First, a 'chroma' value (C) is calculated from saturation and lightness. Temporary R, G, B values are assigned based on which 60-degree segment the hue falls into, and finally a lightness offset (m) is added and the result is scaled to the 0-255 range.

• Saturation and lightness are converted from percentages to a 0-1 range.
• A 'chroma' value (C) is calculated independently of the lightness offset (m).
• The 60-degree segment that the hue value falls into is determined.
• Based on that segment, temporary values (a combination of C, X, 0) are assigned to the R, G, B channels.
• The lightness offset (m) is added and the result is multiplied by 255 to get the final R, G, B values.

H=210°, S=65%, L=45% (a vivid blue) converts to approximately R=40, G=115, B=189.

• Enter hue (H) between 0 and 360 degrees; 360 degrees corresponds to the same color as 0 degrees (red).
• Enter saturation and lightness as percentages (0-100); decimal values give a more precise result.
• The resulting RGB values may come out as decimals; round to the nearest whole number when using them on screen or in CSS.

The HSL (Hue, Saturation, Lightness) model is one of the formats designers reach for most often when defining a color, because adjusting hue, saturation, and lightness independently makes it easy to build variations of a color. However, since screens and most image formats process color as RGB, an HSL-defined color must be converted to RGB before it can be displayed.

This conversion hinges on determining which 60-degree segment of the color wheel the hue (H) falls into; the wheel is divided into six equal 60-degree segments, and in each one a different combination of the red, green, and blue channels becomes dominant.

Saturation and lightness determine how 'wide' (chroma, C) the channel values within that segment will be. Higher saturation produces more vivid colors, lower saturation produces more muted, gray-leaning colors, and lightness shifts the result toward black or white.

This tool processes the H, S, L values you enter through the standard conversion steps to produce directly usable R, G, B values. You can use the results in CSS's rgb() function, in image editing software, or in any other color-based tool.

Converting HSL to RGB is especially useful for developers who need to hand off brand colors defined with HSL in a design system to third-party tools — such as legacy image editors or print software — that expect RGB or HEX input.