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.
On this page
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. 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.
linear-gradient(90deg, #ff0000 0%, #ffff00 16.7%, #00ff00 33.3%, #00ffff 50%, #0000ff 66.7%, #ff00ff 83.3%, #ff0000 100%)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 are mostly a story of lower saturation.
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.
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.
#ff0000HSB
HSL
#7c3aedHSB
HSL
Hex
#0f766eHSB
HSL
Hex
#f97316HSB
HSL
#ffffffHSB
HSL
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, and HSL colours goes further.
: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 */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.
Perceptual models fix this. OKLCH 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, 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".
Questions people ask
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.
Written by Gradiently
The team behind Gradiently, a design tool built around Marks: living gradients that make everything you design look like yours.
See our profile