Skip to content

RGB to HSL Converter: Hue & Lightness Values

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

Last updated

Red, green, and blue channel bars converting to a hue wheel arc with saturation and lightness axes.RGBRGBHSLHSL
HSL separates colour identity from brightness, making adjustments more intuitive.
H221°
S83%
L53%
HSL221, 83%, 53%

About this conversion

RGB defines colors as a mix of red, green, and blue light, a model that mirrors how displays work but is not particularly intuitive for humans. HSL (Hue, Saturation, Lightness) reorganizes the same information into a cylindrical model that is much easier to reason about: hue is the color on the wheel (0–360 degrees), saturation is vibrancy (0–100%), and lightness is brightness (0–100%).

HSL is widely supported in modern CSS via the hsl() function and is the preferred format when you want to create color variations programmatically. For example, you can darken a button hover state by simply reducing lightness, or desaturate a background without changing its hue. These tasks are awkward in RGB.

This tool converts any RGB triplet to its HSL equivalent in real time. It is useful for front-end developers building design systems, for creating accessible color palettes with consistent lightness, and for anyone who prefers to think about color in terms of tint, shade, and tone. Once you have your HSL palette, verify that your color pairings meet accessibility standards with the Color Contrast Checker.

HSL colour model shown as a cylinder with hue around the circumference, saturation along the radius, and lightness on the vertical axis.HSL Colour Model — CylinderL = 0% (Black)0° Red60° Yellow120° Green180° Cyan240° Blue300° MagentaL = 100% (White)L = 50% (Pure colour)Lightness (L)Saturation (S) →Centre = grey, edge = vividHue (H)0°–360° aroundthe circumferenceHSL separates colour (H) from intensity (S) and brightness (L)
HSL separates colour identity (H) from intensity (S) and brightness (L), making programmatic colour adjustments intuitive.

Related content

How to Calibrate Printer Colors

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 HSL and how is it different from RGB?

HSL stands for Hue, Saturation, Lightness. While RGB defines colors by mixing red, green, and blue light, HSL describes colors the way humans think about them: by their hue (color), vibrancy (saturation), and brightness (lightness). Both describe the same color space.

Is the RGB to HSL conversion lossless?

Yes. RGB and HSL describe the same sRGB color space using different coordinates. You can convert back and forth without losing any color information.

Why use HSL instead of RGB in CSS?

HSL makes it easier to create color variations programmatically. You can darken a color by reducing lightness, desaturate it by lowering saturation, or shift its hue, all without affecting the other properties. The CSS hsl() function is widely supported.