What is HSL?
HSL stands for Hue, Saturation, Lightness — a cylindrical colour model designed to be more intuitive than RGB for humans working with colour. Instead of mixing light channels, you describe a colour by its position on the colour wheel (hue), how vivid it is (saturation), and how light or dark it is (lightness).
- Hue — angle on the colour wheel, 0°–360°. Red is 0°, green is 120°, blue is 240°.
- Saturation — 0% is grey, 100% is full colour.
- Lightness — 0% is black, 50% is the pure colour, 100% is white.
RGB to HSL conversion formula
R′ = R / 255 G′ = G / 255 B′ = B / 255 Cmax = max(R′, G′, B′) Cmin = min(R′, G′, B′) Delta = Cmax − Cmin L = (Cmax + Cmin) / 2 S = 0 if Delta = 0 S = Delta / (1 − |2L − 1|) otherwise H = 0 if Delta = 0 H = 60 × ((G′−B′) / Delta mod 6) if Cmax = R′ H = 60 × ((B′−R′) / Delta + 2) if Cmax = G′ H = 60 × ((R′−G′) / Delta + 4) if Cmax = B′ When to use HSL instead of RGB
HSL is the preferred format when you need to programmatically adjust a colour.
To make a colour 20% lighter, just increase the L value. To desaturate it, lower S.
In CSS, hsl(200, 80%, 40%) is instantly readable as a medium-dark teal,
while its RGB equivalent rgb(20, 122, 163) requires mental calculation.
RGB is more natural when working with raw pixel data, image processing, or hardware that addresses colour channels directly.
Colour palette hex codes
Common web colours with their RGB and HSL equivalents.
| Colour name | Hex code | RGB value | HSL value | |
|---|---|---|---|---|
| Black | #000000 | rgb(0, 0, 0) | hsl(0, 0%, 0%) | |
| White | #FFFFFF | rgb(255, 255, 255) | hsl(0, 0%, 100%) | |
| Cream | #FFFDD0 | rgb(255, 253, 208) | hsl(57, 100%, 91%) | |
| Beige | #F5F5DC | rgb(245, 245, 220) | hsl(60, 56%, 91%) | |
| Red | #FF0000 | rgb(255, 0, 0) | hsl(0, 100%, 50%) | |
| Lime | #00FF00 | rgb(0, 255, 0) | hsl(120, 100%, 50%) | |
| Blue | #0000FF | rgb(0, 0, 255) | hsl(240, 100%, 50%) | |
| Yellow | #FFFF00 | rgb(255, 255, 0) | hsl(60, 100%, 50%) | |
| Cyan | #00FFFF | rgb(0, 255, 255) | hsl(180, 100%, 50%) | |
| Magenta | #FF00FF | rgb(255, 0, 255) | hsl(300, 100%, 50%) | |
| Orange | #FF8000 | rgb(255, 128, 0) | hsl(30, 100%, 50%) | |
| Gold | #FFD700 | rgb(255, 215, 0) | hsl(51, 100%, 50%) | |
| Golden | #DAA520 | rgb(218, 165, 32) | hsl(43, 74%, 49%) | |
| Brown | #A52A2A | rgb(165, 42, 42) | hsl(0, 59%, 41%) | |
| Dark Brown | #5C4033 | rgb(92, 64, 51) | hsl(19, 29%, 28%) | |
| Coral | #FF6347 | rgb(255, 99, 71) | hsl(9, 100%, 64%) | |
| Hot pink | #FF69B4 | rgb(255, 105, 180) | hsl(330, 100%, 71%) | |
| Light Pink | #FFB6C1 | rgb(255, 182, 193) | hsl(351, 100%, 86%) | |
| Baby Pink | #F4C2C2 | rgb(244, 194, 194) | hsl(0, 69%, 86%) | |
| Silver | #C0C0C0 | rgb(192, 192, 192) | hsl(0, 0%, 75%) | |
| Gray | #808080 | rgb(128, 128, 128) | hsl(0, 0%, 50%) | |
| Maroon | #800000 | rgb(128, 0, 0) | hsl(0, 100%, 25%) | |
| Blood Red | #880808 | rgb(136, 8, 8) | hsl(0, 89%, 28%) | |
| Dark Red | #8B0000 | rgb(139, 0, 0) | hsl(0, 100%, 27%) | |
| Sage Green | #8FBC8F | rgb(143, 188, 143) | hsl(120, 25%, 65%) | |
| Olive | #808000 | rgb(128, 128, 0) | hsl(60, 100%, 25%) | |
| Emerald Green | #50C878 | rgb(80, 200, 120) | hsl(140, 52%, 55%) | |
| Forest Green | #228B22 | rgb(34, 139, 34) | hsl(120, 61%, 34%) | |
| Green | #008000 | rgb(0, 128, 0) | hsl(120, 100%, 25%) | |
| Lavender | #E6E6FA | rgb(230, 230, 250) | hsl(240, 67%, 94%) | |
| Lilac | #C8A2C8 | rgb(200, 162, 200) | hsl(300, 26%, 71%) | |
| Purple | #800080 | rgb(128, 0, 128) | hsl(300, 100%, 25%) | |
| Dark Purple | #301934 | rgb(48, 25, 52) | hsl(291, 35%, 15%) | |
| Teal | #008080 | rgb(0, 128, 128) | hsl(180, 100%, 25%) | |
| Navy | #000080 | rgb(0, 0, 128) | hsl(240, 100%, 25%) | |
| Indigo | #4B0082 | rgb(75, 0, 130) | hsl(275, 100%, 25%) | |
| Violet | #EE82EE | rgb(238, 130, 238) | hsl(300, 76%, 72%) | |
| Crimson | #DC143C | rgb(220, 20, 60) | hsl(348, 83%, 47%) | |
| Sky blue | #87CEEB | rgb(135, 206, 235) | hsl(197, 71%, 73%) | |
| Baby Blue | #89CFF0 | rgb(137, 207, 240) | hsl(199, 77%, 74%) |
Frequently asked questions
What is HSL colour?
HSL (Hue, Saturation, Lightness) is a colour model that describes colours the way humans think about them. Hue is the colour's position on a 360° wheel — red at 0°, green at 120°, blue at 240°. Saturation controls how vivid the colour is, from 0% (grey) to 100% (fully saturated). Lightness controls brightness, from 0% (black) to 100% (white), with 50% giving the pure colour.
What is the HSL value of white?
White in HSL is hsl(0, 0%, 100%). Its RGB value is rgb(255, 255, 255) and its hex code is #FFFFFF. Hue and saturation are irrelevant at full lightness — any hue at 0% saturation and 100% lightness produces white.
What is the HSL value of black?
Black in HSL is hsl(0, 0%, 0%). Its RGB value is rgb(0, 0, 0) and its hex code is #000000. Like white, hue and saturation have no effect at 0% lightness — the result is always black.
What is the HSL value of red?
Pure red in HSL is hsl(0, 100%, 50%). Its RGB value is rgb(255, 0, 0) and its hex code is #FF0000. Red sits at 0° (and equivalently 360°) on the colour wheel.
Are the HSL results always exact?
H, S, L values are rounded to whole numbers for readability. Rounding introduces minor imprecision — converting back to RGB may give values off by ±1. Store the original RGB values when precision matters.