Using the converter
Type an RGB colour as rgb(255, 136, 0) or three numbers from 0 to 255. The answer is an hsl() value you can paste into CSS.
Hex codes and colour names work too. Swap the boxes to turn hsl() back into rgb().
The RGB to HSL formula
Divide red, green and blue by 255. Call the largest M and the smallest m, and the chroma C = M − m.
Lightness is L = (M + m) ÷ 2. Saturation is C ÷ (1 − |2L − 1|), or 0 when C is 0. The hue is the same as in HSV. If red is the largest, H = 60 × ((G − B) ÷ C), plus 360 if negative. If green, H = 60 × ((B − R) ÷ C + 2). If blue, H = 60 × ((R − G) ÷ C + 4).
A worked example
Take rgb(255, 136, 0). Divided by 255 that's 1, 0.533 and 0, so M = 1, m = 0 and C = 1.
Lightness is (1 + 0) ÷ 2 = 0.5. Saturation is 1 ÷ (1 − |1 − 1|) = 1. Red is the largest, so the hue is 60 × 0.533 = 32°. The answer is hsl(32, 100%, 50%).
Common colours in HSL
| Colour | RGB | HSL |
|---|---|---|
| Red | rgb(255, 0, 0) | hsl(0, 100%, 50%) |
| Orange | rgb(255, 165, 0) | hsl(39, 100%, 50%) |
| Yellow | rgb(255, 255, 0) | hsl(60, 100%, 50%) |
| Lime | rgb(0, 255, 0) | hsl(120, 100%, 50%) |
| Green | rgb(0, 128, 0) | hsl(120, 100%, 25%) |
| Cyan | rgb(0, 255, 255) | hsl(180, 100%, 50%) |
| Blue | rgb(0, 0, 255) | hsl(240, 100%, 50%) |
| Navy | rgb(0, 0, 128) | hsl(240, 100%, 25%) |
| Purple | rgb(128, 0, 128) | hsl(300, 100%, 25%) |
| Magenta | rgb(255, 0, 255) | hsl(300, 100%, 50%) |
| Pink | rgb(255, 192, 203) | hsl(350, 100%, 88%) |
| Brown | rgb(165, 42, 42) | hsl(0, 59%, 41%) |
| White | rgb(255, 255, 255) | hsl(0, 0%, 100%) |
| Silver | rgb(192, 192, 192) | hsl(0, 0%, 75%) |
| Grey | rgb(128, 128, 128) | hsl(0, 0%, 50%) |
| Black | rgb(0, 0, 0) | hsl(0, 0%, 0%) |
HSL compared with HSV
Both models share the same hue. They differ in the other two numbers. In HSL, lightness 50% is the pure colour, 0% is black and 100% is white, so a colour can be lightened or darkened from the middle.
In HSV (also called HSB), the pure colour sits at 100% value and white is 0% saturation at 100% value. hsl(220, 60%, 50%) and hsv(220, 75%, 80%) are the same blue. CSS reads hsl() but not hsv(), and RGB to HSV has the other model.
Where HSL came from
George Joblove and Donald Greenberg described HSL in the August 1978 issue of Computer Graphics, the same issue in which Alvy Ray Smith described HSV.
CSS has accepted hsl() since CSS Color Level 3, and Level 4 added the space-separated form, hsl(220 60% 50%), with an optional alpha after a slash.
Questions
Why is the hue 0 for greys?
When red, green and blue are equal there is no hue, so it is written as 0. Changing it makes no difference.
Should I use hsl() or rgb() in CSS?
Both give the same colours. hsl() is easier to adjust by hand, because you can change the lightness and keep the hue.
Sources
Added and reviewed . What's new