Color Theory Basics: Hue, Saturation, Lightness Explained
Color theory sounds intimidating because the field has 200 years of paint-pigment vocabulary glued to it. For digital design you actually need three concepts: hue (which color), saturation (how vivid), and lightness (how bright). Master those and you can read every other tool.
This article walks through each property in plain language, shows how they map to the color spaces you will encounter (HSL, HSV, OKLCH), and explains the practical decisions you make with each one when designing an interface.
Hue: which color is it?
Hue is the answer to "what color is this?" - red, orange, yellow, green, cyan, blue, purple. We measure hue as an angle on a wheel (0 to 360 degrees). Red is at 0, yellow at 60, green at 120, cyan at 180, blue at 240, magenta at 300.
When you pick a color in any modern tool, you are first picking a hue angle. Two colors with the same hue but different saturation or lightness still feel like the same family - which is why hue is the foundation of palette design.
Saturation: how vivid is it?
Saturation (also called chroma) is how far a color is from gray. A fully saturated red is fire-engine red; the same hue at zero saturation is a medium gray with a faint warm cast.
High saturation grabs attention - good for buttons and alerts, exhausting for body text or backgrounds. Most production palettes use one or two highly saturated accent colors against many low-saturation surface colors.
Lightness: how bright is it?
Lightness (or luminance) is the easy one: 0% is pitch black, 100% is pure white, 50% is the pure hue. Adjusting lightness gives you tints (lighter, mixed with white) and shades (darker, mixed with black).
Crucially, lightness drives accessibility. Two colors with the same hue but very different lightness will pass contrast; same hue, similar lightness will fail. Always check pairs against the WCAG threshold.
Why HSL/HSV are not enough for modern design
The classic HSL color space treats lightness as a number from 0-100, but that number is not perceptually accurate. A 50% lightness yellow looks much brighter than a 50% lightness blue. This is why old gradient and palette tools produce uneven results.
OKLCH (introduced 2020) fixes this. Same lightness number = same perceived brightness across hues. Modern CSS supports OKLCH natively, and most newer color tools use it as the default working space.
Try the related tools
Frequently asked questions
What is the difference between HSL and HSV?
HSL uses Lightness (50% is the pure hue, 100% is white). HSV uses Value (100% is the pure hue, 0% is black). HSL is more common in CSS; HSV is more common in image editors.
Is hue measured in degrees or percentages?
Degrees. Hue is an angle on the color wheel from 0 to 360. Saturation and lightness are percentages from 0 to 100.
Why does my 50% lightness yellow look brighter than 50% blue?
Because HSL/HSV lightness is mathematical, not perceptual. Use OKLCH if you want lightness numbers that match what you actually see.