Dev Hub Solutions

Product studio

Get in touch

RGB to HSL Converter

Convert any RGB color to HSL in your browser. No signup, no tracking — and below, the math behind the conversion.

Example conversion

RGB

rgb(59, 130, 246)

HSL

hsl(217, 91%, 60%)

How the conversion works

Normalise each RGB channel to 0–1 (divide by 255). Find the min and max. Lightness is the midpoint. Saturation is the relative spread between min and max, scaled by how light or dark the color is. Hue is derived from which channel is the max and the relative positions of the other two. HSL is the easier representation for design operations like "slightly darker" or "slightly more saturated".

Convert any color, not just this one

Open the full color picker to pick any color visually and see it in HEX, RGB, HSL, and OKLCH at the same time. The picker also generates palettes (complementary, analogous, triadic, monochromatic) you can copy with one click.