Hue, Saturation and Brightness: The Three Properties of Color

Every color can be described by three properties: its hue, how saturated it is, and how light or dark it is. Learn to see those three separately and you can fix almost any color problem by changing one thing at a time. This guide shows each property in isolation, explains why brightness, lightness and value are not quite the same, and shows how to use saturation and lightness to build calmer palettes and clearer layouts.

All the examples start from one blue, #2680D9, which is hsl(210, 70%, 50%). In each section only one number changes.

Hue: which color it is

Hue is the color family: red, orange, green, blue and so on. It is measured as an angle on the color wheel, from 0 to 360 degrees. Change only the hue and you get a different color with the same strength and the same HSL lightness.

Saturation: how vivid it is

Saturation, sometimes called chroma or intensity, is how pure or vivid a color is. At full saturation the hue is as strong as it can be. As saturation falls, the color moves toward a gray of the same lightness, and at 0% it is a gray with no hue at all.

Lightness: how light or dark it is

The third property is how close the color is to black or white. In HSL it is called lightness, from 0% (black) to 100% (white), with the most vivid version of the hue at 50%. Lightness is the property that matters most for readability, because contrast between text and background depends almost entirely on it.

Stepping lightness like this is the starting point for a color scale. Our guide Shades, Tints and Tones: How to Build a Color Scale covers turning those steps into a full system.

Brightness vs lightness vs value

Here is where the vocabulary gets confusing. There are two popular ways to describe a screen color with three numbers, and they use the third number differently.

• HSL (hue, saturation, lightness) is used in CSS. Lightness 0% is black, 100% is always white, and 50% is the pure hue.
• HSB (hue, saturation, brightness), also called HSV (value), is used by many design apps' color pickers. Brightness 0% is black, and 100% is the brightest version of the color, which is the pure hue at full saturation and white only at 0% saturation.

So the same color gets different numbers in each. Our blue is hsl(210, 70%, 50%) but hsv(210, 82%, 85%). Even the saturation differs, because each model measures it against a different reference. Neither is more correct; just make sure you know which one a tool is showing before you copy numbers between them.

Why yellow looks lighter than blue

HSL lightness and HSB brightness treat every hue the same, but our eyes don't. We are far more sensitive to green and yellow light than to blue. The standard formula for relative luminance, the one used to calculate WCAG contrast ratios, reflects this: green contributes about 72% of a color's luminance, red about 21% and blue only about 7%.

The effect is easy to see with colors that share the same HSL lightness of 50%. Against black, pure yellow #FFFF00 has a contrast ratio of 19.55:1 and pure green #00FF00 has 15.3:1, while magenta #FF00FF has 6.69:1 and pure blue #0000FF only 2.44:1. On paper they are equally light. On screen, yellow glows while blue looks far darker.

Perceptual lightness: OKLCH

Color spaces such as OKLCH were designed so that equal lightness numbers look equally light. In OKLCH, pure yellow has a lightness of about 97% and pure blue about 45%, which matches what you see. The Color Converter shows any color in OKLCH alongside HEX, RGB and HSL.

Going the other way is revealing. The four colors below all have an OKLCH lightness of 70% and the same chroma, so they look evenly matched. Their HSL lightness values are all over the place: 66%, 45%, 37% and 74%. Against black, their contrast ratios stay close together, from 7.46:1 to 8.25:1.

Using saturation and lightness for hierarchy

Once you can see the three properties separately, they become tools for directing attention. The eye goes first to whatever differs most from its surroundings, and in most layouts the strongest levers are saturation and lightness, not hue.

• Keep large areas, such as backgrounds, sidebars and cards, low in saturation, so they stay quiet.
• Save full saturation for the few things that need action or attention: the main button, an alert, a selected item.
• Use lightness to separate layers: a slightly lighter or darker surface reads as raised or sunken without needing a border.
• Show text importance with lightness steps, such as near-black for headings and a mid gray for secondary text, rather than with different hues.
• When something feels too loud, lower its saturation first. When it feels too heavy, raise its lightness.

Building a calmer palette

A palette full of high-saturation colors can feel energetic, but it is tiring to look at for long and leaves nothing to stand out. Keeping the same hues and lowering their saturation, while spreading their lightness, makes a palette feel calmer and more grown-up without changing its character.

The calm version has the same hue relationships, so it still holds together, but it is easier to live with and gives you room to add one vivid accent where you want the eye to go.

A quick way to diagnose a color

1. Wrong family, such as a blue that looks too purple? Adjust the hue a few degrees.
2. Too loud or too dull? Adjust the saturation.
3. Too heavy, too faint, or hard to read? Adjust the lightness, then check the contrast ratio.

The Color Picker lets you try this directly: pick a color on its wheel, or from anywhere on your screen in browsers that support it, and copy it as HEX, RGB or HSL. Then take your adjusted colors into the generator to build a full palette around them.