Skip to content

HSL to RGB Converter: CSS Color to RGB

Convert HSL (Hue, Saturation, Lightness) to RGB values.

Last updated

A hue wheel arc with saturation and lightness values converting to three red, green, and blue channel bars.HSLHSLRGBRGB
HSL to RGB conversion maps perceptual colour properties back to display channels.
r39
g103
b231
HEX#2767E7

About this conversion

HSL (Hue, Saturation, Lightness) is a human-friendly color model that lets you pick a color by its position on the color wheel (hue), its vibrancy (saturation), and its brightness (lightness). While HSL is great for designing and adjusting colors, many applications, APIs, and image formats still require RGB values.

You need HSL-to-RGB conversion when you have designed a color palette using HSL notation and need to export the values for use in environments that only understand RGB, such as certain graphics libraries, LED controllers, game engines, or older CSS code. The conversion involves trigonometric mapping from the cylindrical HSL space back to the cubic RGB space.

This tool performs the conversion instantly and shows you both the resulting R, G, B integer values and a live color preview. Adjust the sliders to explore how changes in hue, saturation, and lightness map to changes in the red, green, and blue channels. If you need a HEX code for CSS rather than RGB integers, the RGB to HEX converter takes the output directly.

Reference card showing 8 CSS hsl() colour declarations with their RGB equivalents and visual swatches.CSS hsl() Quick ReferenceCommon hsl() declarations with their RGB equivalentsColourCSS hsl() DeclarationRGB EquivalentPure Redhsl(0, 100%, 50%)rgb(255, 0, 0)Pure Greenhsl(120, 100%, 50%)rgb(0, 255, 0)Pure Bluehsl(240, 100%, 50%)rgb(0, 0, 255)Sky Bluehsl(210, 100%, 56%)rgb(31, 133, 255)Orangehsl(30, 100%, 50%)rgb(255, 128, 0)Purplehsl(280, 60%, 50%)rgb(153, 51, 204)Mid Greyhsl(0, 0%, 50%)rgb(128, 128, 128)Tealhsl(160, 80%, 40%)rgb(20, 184, 122)
HSL makes colour adjustments intuitive in CSS. Changing lightness darkens or lightens without affecting hue.

Was this page helpful?

Color conversions are mathematical approximations. For critical color work, verify against physical swatch books and printed proofs. See our methodology and full disclaimer.

Frequently Asked Questions

What is the difference between HSL and HSV?

Both use hue and saturation, but they define brightness differently. In HSL, lightness 50% gives the purest color and 100% gives white. In HSV, value 100% gives the brightest version of the hue. HSL is more common in CSS; HSV is more common in image editors like Photoshop.

Can I use HSL values in Photoshop?

Photoshop uses HSB (Hue, Saturation, Brightness), which is the same as HSV, not HSL. If you need values for Photoshop, use the RGB to HSV converter instead.

What does a saturation of 0% mean in HSL?

A saturation of 0% means the color is completely desaturated; it becomes a shade of gray. The lightness value then determines how dark or light that gray is, from black (0%) to white (100%).