Hue, Saturation & Lightness: HSL Explained

A plain-language guide to the three dimensions of color, and a game to train reading them.

Short answer: HSL describes any color with three numbers. Hue is which color it is, given as an angle on a wheel (red at 0°, green at 120°, blue at 240°, back to red at 360°). Saturation is how pure or vivid it is. Lightness is how bright it is, from black through the pure color to white. Together those three answers pin down a single shade.

Three questions, one color

It helps to read a color as three separate questions. Which color is it? That is hue, the position on the color wheel, expressed as a rotation from 0° to 360°. How intense is it? That is saturation, the distance from a neutral gray, running from a dull, washed-out edge up to a fully pure color. How light or dark is it? That is lightness, sweeping from black at the bottom, through the vivid color in the middle, to white at the top. Change any one number and you change only that aspect, which is what makes the model so easy to reason about.

Dimension	Question it answers	What it controls	Typical range
Hue	Which color?	Position around the color wheel	0° – 360°
Saturation	How pure?	Distance from a neutral gray	0% – 100%
Lightness	How light or dark?	Black → pure color → white	0% – 100%

A worked example makes the split concrete. The CSS value hsl(210, 90%, 50%) reads as: hue 210° (a blue), saturation 90% (nearly pure), lightness 50% (a mid brightness), giving a strong sky blue. Raise the lightness to 75% and you get a paler blue of the same family; drop the saturation to 20% and you get a muted, grayish blue. The hue value never moved, so it is unmistakably the same color “family” throughout.

The HSL cylinder

HSL and its close relative HSB (also written HSV) were devised in the 1970s as alternative ways to represent RGB color that line up better with human perception. Instead of three raw light channels, they wrap the same colors around a shape you can picture. Hue runs around the circle; saturation runs from the center outward; lightness runs top to bottom. HSL is commonly drawn as a double cone, pinched to a single point at pure black at the bottom and pure white at the top, and widest at the fully saturated colors around the middle. That geometry is not decoration. It captures a real fact of perception, that there is only one black and one white, while the room for vivid, saturated color is greatest at the mid brightness levels.

HSL vs HSB (HSV)

HSL and HSB share hue and saturation but differ on the third channel, and the difference trips people up. In HSL, pushing lightness to 100% always gives white, whatever the saturation is set to. In HSB, pushing brightness to 100% gives white only when saturation is 0; at full saturation, 100% brightness gives you the most vivid version of the hue instead. That is why HSB is often pictured as a single cone with one white-or-vivid apex, while HSL is a double cone with separate black and white tips. Neither is “more correct”. They simply place the pure colors in different spots, and knowing which model a tool uses saves a lot of confusion when a slider does not behave the way you expected.

Why designers reach for HSL in CSS

Because the three channels each mean something a person can feel, HSL is a natural fit for design work. Want a slightly darker button on hover? Drop the lightness a few points and leave hue and saturation alone. Want a muted version of a brand color? Pull the saturation down. Building a set of tints and shades? Hold the hue steady and step the lightness up and down. CSS exposes all of this directly through hsl(), sitting alongside rgb() and hex notation, and all three describe the very same color space with different handles. Hex is compact for storage; HSL is friendlier for adjusting, which is why it shows up so often in theming and design systems.

A caution worth knowing

One honest limitation: HSL is intuitive but not perceptually uniform. Two colors with the same lightness value can look noticeably different in actual brightness, because a fully saturated yellow reads as far lighter than a fully saturated blue at the identical lightness number. This is exactly why lightness in HSL is not a reliable stand-in for contrast when accessibility is on the line. For readable text you should check measured luminance and contrast ratios rather than trusting the L value alone, a point covered in the contrast guide linked below.

Train your eye

Understanding the three dimensions is one thing; reading them at a glance is another. In Huekle, the daily color game, you judge and match shades under gentle time pressure, sharpening your instinct for hue, saturation and lightness all at once. Prefer arranging over matching? Huesort asks you to order a run of colors into a smooth gradient, a direct workout for reading lightness and saturation steps.

Play Huekle →

Frequently asked questions

What do hue, saturation and lightness mean?

They are three separate questions about a color. Hue is which color it is, given as an angle on a wheel from 0° to 360°. Saturation is how pure or vivid it is, from a dull gray edge up to a fully pure color. Lightness is how bright it is, from black through the pure color to white. Together the three numbers pin down a single shade.

What is the difference between HSL and HSB (HSV)?

HSL and HSB (also called HSV) are two ways of reshaping the same RGB colors around perception, sharing hue and saturation but differing on the third channel. In HSL, 100% lightness is always white no matter the saturation. In HSB, 100% brightness is white only when saturation is 0; at full saturation it gives the most vivid version of the hue instead. Geometrically, HSL is often pictured as a double cone and HSB as a single cone.

What is saturation?

Saturation describes how pure or intense a color is, meaning how far it sits from a neutral gray of the same lightness. High saturation looks vivid, low saturation looks washed out or muted, and zero saturation is a plain gray. Saturation says nothing about which color it is (that is hue) or how bright it is (that is lightness).

Why does CSS use HSL?

HSL maps to how people describe color, such as 'a slightly darker, less intense blue', so designers can adjust one meaningful dimension at a time. Nudging lightness or saturation while keeping the hue fixed is far more intuitive than juggling three raw RGB or hex channels, which is why CSS offers hsl() alongside rgb() and hex.

Is hue the same as color?

Not quite. Hue is only one part of a color, the attribute that makes it 'red' or 'green' or 'blue', measured as an angle around a color wheel. A full color also needs saturation and lightness. Two colors can share the exact same hue yet look completely different because one is pale and the other is deep.