RGB to HSL Converter
Convert RGB values to HSL (Hue, Saturation, Lightness).
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 — tasks that 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.
Test your colors in print
After converting your colors, print a test page to verify they look correct on paper:
Color conversions are mathematical approximations. For critical color work, verify against physical swatch books and printed proofs. See our full disclaimer.