# Hue saturation brightness (HSB) explained simply

[Canonical HTML page](https://gradiently.design/guide/hue-saturation-brightness)

Hex codes are for machines. Hue, saturation and brightness are how people actually think about colour: which colour, how strong, how light. Learn the three dials and every colour picker makes sense.

## The short version

- Hue saturation brightness, or HSB, describes a colour with three numbers: hue is the colour's angle on the wheel, saturation is its intensity and brightness is how much light it has.
- HSB is also called HSV, where V stands for value; the two names describe the same model.
- HSL is a close relative in which lightness of 50 percent gives the pure colour and 100 percent always gives white.
- Design tools such as Figma and Photoshop offer HSB pickers, while CSS supports hsl() but not HSB.
- Neither HSB nor HSL matches how bright colours look to the eye, so perceptual models such as OKLCH are better for building even scales.

**Hue saturation brightness** (HSB) is a way to describe any colour with three plain dials. **Hue** is which colour it is, given as an angle from 0 to 360 degrees around the colour wheel. **Saturation** is how intense it is, from grey at 0 percent to full colour at 100 percent. **Brightness** is how much light it has, from black at 0 percent to the brightest version of that colour at 100 percent. Once you see colours this way, adjusting a palette stops being guesswork.

## Hue: which colour

Hue is position on the [colour wheel](https://gradiently.design/guide/color-wheel). On screen wheels, red sits at 0 degrees, green at 120 and blue at 240, with yellow, cyan and magenta between them. Because hue is an angle, colour harmonies become simple arithmetic: add 180 degrees for a complement, 120 for a triad.

Hue from 0 to 360 degrees: `linear-gradient(90deg, #ff0000 0%, #ffff00 16.7%, #00ff00 33.3%, #00ffff 50%, #0000ff 66.7%, #ff00ff 83.3%, #ff0000 100%)`

The full hue range at maximum saturation and brightness. The strip starts and ends on red because hue is a circle.

## Saturation: how strong

Saturation controls how much of the hue is present. Drop it and a colour drains towards grey; raise it and the colour becomes vivid. Most refined palettes live well below full saturation. Fully saturated colours shout, which is right for a sale sticker and tiring for a whole website. [Muted colour palettes](https://gradiently.design/guide/muted-color-palettes) are mostly a story of lower saturation.

- Saturation 0%: #808080
- Saturation 25%: #7f609f
- Saturation 50%: #7f40bf
- Saturation 75%: #7f20df
- Saturation 100%: #7f00ff

One violet hue at a fixed lightness, with only saturation changing. Left is pure grey, right is full colour.

## Brightness: how much light

In HSB, brightness is how lit the colour is. At 0 percent every colour is black, whatever the hue or saturation. At 100 percent you get the brightest version the screen can show for that hue and saturation. To make a pale pastel in HSB you keep brightness high and lower saturation, which mixes in white. That is exactly the idea behind [tints, tones and shades](https://gradiently.design/guide/tints-tones-shades).

## HSB vs HSL: the difference that trips everyone up

HSL looks almost identical: hue, saturation, **lightness**. The hue is the same. What differs is the third dial. In HSL, lightness 50 percent is the pure colour, 0 percent is black and 100 percent is always white. In HSB, brightness 100 percent is the pure colour when saturation is full, and you only reach white by also lowering saturation. Saturation numbers differ between the two as well, so the same colour has different values in each.

| Colour | Hex | HSB | HSL |
| --- | --- | --- | --- |
| Pure red | `#ff0000` | 0°, 100%, 100% | 0°, 100%, 50% |
| Violet | `#7c3aed` | 262°, 76%, 93% | 262°, 83%, 58% |
| Deep teal | `#0f766e` | 175°, 87%, 46% | 175°, 77%, 26% |
| Bright orange | `#f97316` | 25°, 91%, 98% | 25°, 95%, 53% |
| White | `#ffffff` | Any hue, 0%, 100% | Any hue, any saturation, 100% |

Hue matches; saturation and the third value do not. Always check which model a picker is using before copying numbers.

### HSB (also called HSV)

- Brightness 100% with saturation 100% is the pure colour
- White needs brightness 100% and saturation 0%
- Used in many design tool pickers, including Photoshop and Figma
- Not available directly in CSS

### HSL

- Lightness 50% is the pure colour
- Lightness 100% is always white
- Written natively in CSS as `hsl()`
- Easy for making lighter and darker versions

## Using HSL in CSS

CSS understands `hsl()` directly, which makes it handy for theming. Keep the hue in a variable and you can shift a whole interface's colour with one number. There is also `hwb()` (hue, whiteness, blackness), which is closer in spirit to HSB. Details are on [MDN's hsl() page](https://developer.mozilla.org/en-US/docs/Web/CSS/color_value/hsl), and [HSL colours](https://gradiently.design/guide/hsl-colors) goes further.

```css
:root {
  --hue: 262;
  --brand: hsl(var(--hue) 83% 58%);   /* #7c3aed */
  --brand-soft: hsl(var(--hue) 83% 92%);
  --brand-deep: hsl(var(--hue) 70% 28%);
  --brand-muted: hsl(var(--hue) 25% 55%);
}

/* Change --hue to 175 and the whole set turns teal */
```

One hue, four jobs. Lightness makes soft and deep versions; saturation makes the muted one.

## Why equal lightness doesn't look equal

HSB and HSL are geometry, not perception. Pure yellow and pure blue both sit at HSL lightness 50 percent, yet yellow looks far brighter: by the WCAG formula its relative luminance is about 0.93 against blue's 0.07. Put white text on each and the difference is obvious. This is why a palette built by stepping HSL lightness evenly can look lumpy, and why text contrast must always be checked, not assumed.

- Yellow, HSL 60° 100% 50%: #ffff00
- Green, HSL 120° 100% 50%: #00ff00
- Red, HSL 0° 100% 50%: #ff0000
- Blue, HSL 240° 100% 50%: #0000ff

Four colours at exactly the same HSL lightness. Against white, the yellow manages about 1.07:1 and the blue about 8.6:1.

Perceptual models fix this. [OKLCH](https://gradiently.design/guide/oklch-explained) keeps the friendly idea of lightness, chroma and hue, but its lightness tracks what the eye sees, so steps look even. For quick tweaks HSB and HSL are perfect; for a brand scale or a [gradient that avoids muddy middles](https://gradiently.design/guide/gradient-interpolation), reach for OKLCH.

## Quick ways to adjust a colour with HSB

- **Too loud:** lower saturation by 15 to 25 points before touching anything else.
- **Too dull:** raise saturation slightly, or nudge hue a few degrees warmer.
- **Need a hover state:** lower brightness by about 10 points.
- **Need a background tint:** keep hue, drop saturation hard and push brightness near 100.
- **Two colours clash:** move one hue closer to the other, or mute one of them.

If you would rather start from a finished look than from three sliders, Gradiently's Market lets you search Marks by colour words such as "deep teal" or "warm peach".

## FAQ

### What is hue, saturation and brightness?

Hue is a colour's angle on the colour wheel, saturation is how intense it is and brightness is how much light it has. Together they describe any screen colour.

### Is HSB the same as HSV?

Yes. HSV stands for hue, saturation, value, and value means the same as brightness.

### What is the difference between HSB and HSL?

In HSB, brightness 100 percent at full saturation is the pure colour. In HSL, lightness 50 percent is the pure colour and 100 percent is white.

### Can I use HSB in CSS?

Not directly. CSS supports `hsl()`, `hwb()` and `oklch()`, so convert HSB values to one of those.

### What is the difference between hue and saturation?

Hue is which colour it is, such as red or blue. Saturation is how strong that colour is, from grey to vivid.