Theory
Understanding LCH color space and why it matters for design systems.
Traditional color models like RGB and HSL don't account for human perception. Two colors with the same HSL lightness value can appear drastically different in brightness.
hsl(60, 100%, 50%)
Yellow
hsl(240, 100%, 50%)
Blue
Both have 50% lightness in HSL, but yellow appears much brighter than blue.
LCH (Lightness, Chroma, Hue) is a cylindrical representation of the CIELAB color space, designed to be perceptually uniform—meaning equal changes in values produce equal changes in perceived color.
0–100. Represents perceived luminosity, not mathematical brightness. L=50 always appears as a medium grey, regardless of hue.
0–~230. The colorfulness or saturation relative to a neutral grey. Unlike HSL saturation, chroma respects perceptual limits.
0°–360°. The angle on the color wheel. hue.gl uses 25 hues at 15° intervals for comprehensive coverage.
We divide the 360° color wheel into 25 evenly-spaced hues at 15° intervals, starting at 0° (Red) and progressing through the spectrum.
| Sample | Name | Hue Angle | Token |
|---|---|---|---|
| Red | 0° | hue-red |
|
| Vermilion | 15° | hue-vermilion |
|
| Orange | 30° | hue-orange |
|
| Amber | 45° | hue-amber |
|
| Yellow | 60° | hue-yellow |
|
| Lime | 75° | hue-lime |
|
| Chartreuse | 90° | hue-chartreuse |
|
| Green | 120° | hue-green |
|
| Emerald | 150° | hue-emerald |
|
| Teal | 180° | hue-teal |
|
| Cyan | 195° | hue-cyan |
|
| Sky | 210° | hue-sky |
|
| Azure | 225° | hue-azure |
|
| Blue | 240° | hue-blue |
|
| Indigo | 255° | hue-indigo |
|
| Violet | 270° | hue-violet |
|
| Purple | 285° | hue-purple |
|
| Magenta | 300° | hue-magenta |
|
| Pink | 315° | hue-pink |
|
| Rose | 330° | hue-rose |
|
| Crimson | 345° | hue-crimson |
Each hue is generated with 9 perceptually balanced shades using LCH lightness values:
50
L: 97
100
L: 93
200
L: 86
300
L: 72
400
L: 57
500
L: 36
600
L: 25
700
L: 15
800
L: 5
Unlike linear interpolation, LCH shades maintain consistent perceptual steps. The difference between shade 100 and 200 feels the same as between 600 and 700.
Not all LCH colors can be displayed on standard screens (sRGB gamut). When a requested chroma exceeds the displayable range, hue.gl automatically maps the color to the nearest in-gamut equivalent while preserving perceived hue and lightness.