RGB to HSL Converter

Convert RGB to HSL

This RGB to HSL converter turns red, green and blue values into hue, saturation and lightness, the color model that makes it easy to build lighter, darker or muted variations of a color in CSS. Enter rgb(37, 99, 235) and you get hsl(221, 83.2%, 53.3%).

The RGB to HSL formula

1. Divide each channel by 255 to get values between 0 and 1.
2. Find the largest (max) and smallest (min) of the three and their difference d.
3. Lightness is the midpoint: L = (max + min) / 2.
4. Saturation is d / (1 − |2L − 1|), or 0 when d is 0 (a grey).
5. Hue depends on which channel is largest: for red it is 60 × ((G − B) / d mod 6), for green 60 × ((B − R) / d + 2), for blue 60 × ((R − G) / d + 4).

Worked example

rgb(37, 99, 235)
R = 0.1451   G = 0.3882   B = 0.9216
max = 0.9216 (blue)   min = 0.1451   d = 0.7765
L = (0.9216 + 0.1451) / 2        = 0.5333 → 53.3%
S = 0.7765 / (1 − |1.0667 − 1|)  = 0.8319 → 83.2%
H = 60 × ((0.1451 − 0.3882) / 0.7765 + 4)
  = 60 × 3.6869                  = 221.2  → 221
→ hsl(221, 83.2%, 53.3%)

Because blue is the largest channel, the hue falls between 180° and 300°. It sits a little below pure blue (240°), toward cyan, because green is higher than red.

Rounding and round trips

Hue is rounded to whole degrees and saturation and lightness to one decimal place, which is plenty for CSS. Rounding does mean a round trip can drift slightly: hsl(221, 83.2%, 53.3%) converts back to rgb(37, 100, 235), one step off in green. The difference is invisible, but if you must reproduce the exact original numbers, keep the RGB or hex version as the master copy.

If the color has an alpha below 1, set with the Alpha (opacity) slider or typed as rgba(37, 99, 235, 0.25), the result is written as hsla(221, 83.2%, 53.3%, 0.25).

What HSL is good for

• States and variants. Lower the lightness a few points for a hover or pressed state, or raise it above 90% for a tinted background.
• Theming. Keeping hue, saturation and lightness in separate CSS custom properties lets you derive a whole theme from a handful of variables.
• Muting. Reducing saturation gives a calmer version of the same hue for disabled controls or secondary labels.

For a full range of tints and shades from one color, try RGB to colortone. To go back, use HSL to RGB. If your destination is a design app's picker rather than CSS, RGB to HSV gives the numbers it expects.