HSL stands for hue, saturation and lightness, a cylindrical color model that describes a screen color by position on the color wheel, how intense it is and how light or dark it is. In color theory and digital design, HSL is a more intuitive way to express the same colors that the RGB model defines as amounts of red, green and blue light.
HSL is used in CSS, design tools and design systems because its three values map closely to how designers talk about color. Changing one number makes a color lighter, duller or a different hue without recalculating three channels. Its main weakness is that equal lightness values do not look equally light, a limitation that matters for accessible palettes.
How the HSL model represents color
HSL is a geometric transformation of RGB, not an independent color space. It takes the RGB cube and reshapes it into a double cone or cylinder: hue runs around the circumference, saturation runs from the central axis outward, and lightness runs from black at the bottom to white at the top. Every HSL value therefore corresponds to exactly one RGB value within the same color space, usually sRGB on the web.
Lightness is calculated as the average of the largest and smallest RGB channel. Saturation expresses how far the strongest channel departs from that average, scaled to the available range. Hue identifies which channel dominates and in what proportion, expressed as an angle in degrees.
| Component | Range | What it describes | Key reference points |
|---|---|---|---|
| Hue | 0 to 360 degrees | Position on the color wheel | 0 red, 120 green, 240 blue |
| Saturation | 0 to 100 percent | Intensity relative to gray | 0 percent is a neutral gray |
| Lightness | 0 to 100 percent | Amount of black or white mixed in | 0 black, 50 pure hue, 100 white |
A practical consequence is that the fully saturated version of any hue sits at 50 percent lightness. Moving toward 0 percent mixes in black to produce shades, and moving toward 100 percent mixes in white to produce tints, which matches traditional painterly vocabulary.
HSL compared with other color models
HSL belongs to a family of models that designers meet daily, and each serves a different purpose. RGB and hex codes describe how a screen produces color, CMYK describes how ink reproduces it on paper, and perceptual models such as OKLCH describe how people actually see it.
| Model | Axes | Strength | Weakness |
|---|---|---|---|
| RGB | Red, green, blue intensity | Matches how displays emit light | Hard to adjust intuitively |
| Hex color code | RGB written in hexadecimal | Compact and universal in code | Unreadable without conversion |
| HSL | Hue, saturation, lightness | Intuitive tints, shades and hue shifts | Lightness is not perceptually uniform |
| HSB or HSV | Hue, saturation, brightness or value | Common in color pickers | Same hue model, different top of range |
| OKLCH | Perceptual lightness, chroma, hue | Even steps that look even | Some values fall outside the display gamut |
| CMYK | Cyan, magenta, yellow, black ink | Required for process printing | Device-dependent, smaller gamut |
The difference between HSL and HSB is a frequent source of confusion. Both share the same hue angle, but in HSB the pure hue sits at 100 percent brightness, whereas in HSL it sits at 50 percent lightness and 100 percent lightness is always white. A value copied from one model into the other produces a different color.
Using HSL in CSS and design systems
CSS supports HSL directly through the hsl() function, for example hsl(210 80% 45%), with an optional alpha value for transparency. Because the parts are separate numbers, HSL combines well with CSS variables: a design system can store a brand hue once and derive hover states, borders and backgrounds by changing only lightness or saturation.
HSL is especially effective for systematic palette work. Designers build a tonal scale by keeping hue constant and stepping lightness, create analogous schemes by rotating hue 30 degrees, and find complementary colors by adding 180 degrees.
| Adjustment | Typical change | Result |
|---|---|---|
| Hover or pressed state | Lightness minus 5 to 10 points | Slightly darker, same color identity |
| Subtle background tint | Lightness 92 to 97 percent, low saturation | Soft surface in the brand hue |
| Disabled state | Saturation reduced toward 0 to 20 percent | Washed-out, inactive appearance |
| Complementary accent | Hue plus 180 degrees | Strong contrast for highlights |
| Analogous accent | Hue plus or minus 30 degrees | Harmonious, low-tension variation |
Limitations of HSL for accessible color
The central weakness of HSL is that its lightness is a mathematical average, not a perceived brightness. Pure yellow at hsl(60 100% 50%) and pure blue at hsl(240 100% 50%) share the same lightness value, yet yellow looks dramatically brighter. The human eye is far more sensitive to green and yellow wavelengths than to blue.
This has direct consequences for contrast and accessibility. A palette built with identical HSL lightness steps across several hues will not produce identical contrast ratios against white text, so each color must be checked separately against WCAG contrast thresholds such as 4.5 to 1 for normal text.
- Uneven tonal scales: a blue scale and a yellow scale with the same lightness steps look mismatched side by side.
- Hue drift in dark and light tints: very light or very dark HSL colors can appear to shift hue.
- Limited to sRGB: HSL cannot express the wider gamut of modern displays, unlike OKLCH or Display P3 values.
- Unpredictable mixing: interpolating between two HSL colors may travel around the hue wheel and pass through unwanted hues.
The common recommendation is to use HSL for quick, intuitive adjustments and readable code, but to verify final palettes with a contrast checker or to generate scales in a perceptual space such as OKLCH when consistent lightness matters.
The short version
HSL describes a color with three simple questions. Which color is it, such as red, green or blue? How strong is it, from gray to vivid? How light is it, from black to white?
That is easier than mixing red, green and blue light by hand. To make a button a bit darker, a designer only lowers one number. The catch is that the eye does not see all colors with the same brightness, so two HSL colors with the same lightness number can still look quite different.
Where it makes a difference
A design team is building a component library for a banking application with a primary blue of hsl(214 82% 42%). Instead of picking every shade by eye, they define the hue and saturation once as CSS variables and generate ten tints and shades by stepping lightness from 96 percent down to 18 percent.
When they create a matching warning scale with the same lightness steps in an orange hue, the orange buttons look much brighter and white text on them fails the 4.5 to 1 contrast requirement. The team darkens the orange steps individually until every text combination passes.
HSL made the palette fast to build and easy to maintain, while a separate contrast check prevented the model’s lightness limitation from reaching users.