Learn Color Theory
Master color with interactive guides.
Three Dimensions of Color
Every color is defined by hue, lightness, and chroma — three independent axes in OKLCH.
When you pick a color, you're making three separate decisions at once: which hue (red, blue, green…), how light or dark (value/lightness), and how vivid or muted(chroma). OKLCH makes these three axes explicit and independent — changing one never accidentally shifts the others. The term “value” in traditional color theory maps to “lightness” in OKLCH — this article uses both interchangeably.
H
Hue — which color family. 0–360° spectral position on the wheel.
L
Lightness — how bright. 0% pure black to 100% pure white.
C
Chroma — how vivid. 0 is gray, higher is more saturated.
Why OKLCH?
OKLCH separates hue, lightness, and chroma so that changing one never accidentally shifts the others. This makes it ideal for design systems where you need precise, predictable control over each dimension.
Hue — The Color Family
0–360° around the spectrum: red, orange, yellow, green, blue, violet, and back again.
Hue is the most basic way to name a color. In OKLCH, it's expressed as a degree on a 360° wheel: 0° is red, ~90° is yellow, ~145° is green, ~260° is blue, and it wraps back to red at 360°. Pick a starting color below — the strip shows all 36 major hues at that color's lightness and chroma.
#E06041
Hue 35° at L=64% C=17
Hue ≠ brightness
Pure hues have different natural lightness — yellow is inherently lighter than blue. OKLCH accounts for this: a uniform chroma and lightness value produces genuinely equal perceived vibrancy across all hues.
Lightness — How Bright
The black-to-white axis, independent of hue and chroma.
Lightness describes where a color falls on the scale from pure black (0%) to pure white (100%). In OKLCH, this axis is perceptually linear — each step looks equally brighter to your eye, unlike HSL where the same step size can look dramatically different depending on hue.
#E26242
H=35° L=65% C=17
Perceptual uniformity: OKLCH vs HSL
OKLCH L=65% C=15 — perceptually equal
HSL L=50% S=60% — unequal brightness
Why this matters
In HSL, L=50% yellow looks much brighter than L=50% blue. In OKLCH, L=0.65 looks equally bright regardless of hue — that's perceptual uniformity. This is why PerfectPalette generates color scales in OKLCH: each step looks evenly spaced.
Chroma — How Vivid
The vibrancy axis: from pure gray to maximum saturation.
Chroma measures how colorful a color is. Zero chroma is pure gray. Higher chroma means more vivid and saturated. Unlike HSL saturation, OKLCH chroma is absolute — the same value looks equally vivid across all hues, making it the right tool for consistent design tokens.
#DB684C
H=35° L=65% C=15
sRGB gamut boundaries at L=60%
Dashed borders mark colors outside the sRGB display gamut — they get clipped to the nearest displayable color. Notice how green and cyan hues hit the boundary at lower chroma values than red or blue.
| Hue | C=5 | C=10 | C=15 | C=25 | C=35 |
|---|---|---|---|---|---|
| Red | |||||
| Yellow | |||||
| Green | |||||
| Cyan | |||||
| Blue | |||||
| Magenta |
Chroma is absolute
Unlike HSL saturation (which is relative to lightness), a chroma of 15 looks equally vivid whether the hue is red, green, or blue. This makes chroma the right tool for building design tokens with consistent visual weight.
Three Dimensions Together
Hue, lightness, and chroma are independent — changing one doesn't affect the others.
The power of OKLCH is that its three axes are truly independent. You can make a color lighter without shifting its hue, or more muted without darkening it. The grid below shows four combinations of lightness and chroma at a single hue — rotate the hue to see how the relationships hold across the spectrum.
Dark + Muted
Dark + Vivid
Light + Muted
Light + Vivid
Monochromatic = L × C progression
A monochromatic palette is really a lightness-chroma progression at a fixed hue. By varying L and C independently, you create natural depth and hierarchy without introducing color clash — the foundation of every design system scale.