How Colour Systems Work
Ever wondered why some colour palettes feel perfectly balanced while others seem off? It's not just maths — it's perception. Here's how modern UI colour systems are designed to work with the way we actually see — and why the colour models underneath matter.
When Maths Gets Colour Wrong
Not all colour spaces are created equal. When you create evenly-spaced colours mathematically, they don't always look evenly-spaced to the human eye. That's where perceptual colour models come in.
Most UI designers work with RGB (Hex is just another way to represent RGB), HSL, and more recently, OKLCH.
RGB is how computers store colour — three channels (Red, Green, Blue) mixed together. It's based on how monitors work, not how we see. Not perceptual — equal mathematical steps don't look equal.
HSL (Hue, Saturation, Lightness) makes RGB more intuitive, but still isn't perceptually uniform. Yellow appears brighter than blue at the same "lightness."
OKLCH (Lightness, Chroma, Hue) is a modern perceptual model based on human vision research. Equal numerical steps create equal perceived differences. Used by Tailwind v4 and modern design systems.
See the Difference: Perceptual vs Mathematical
These three gradients use the exact same start and end colours, with 11 evenly-spaced steps. Notice how different they look?
So What's the Difference?
OKLCH is designed around how we actually see colour, not how computers store it. When you space colours evenly in OKLCH, they look evenly spaced. That's why frameworks like Tailwind CSS are moving towards perceptual colour models — the maths finally matches what our eyes see.
How Tailwind CSS Creates Balanced Palettes
Tailwind's colour palettes aren't just mathematically evenly-spaced — they're carefully tuned to look evenly-spaced. Here's the difference that makes.
Tailwind's Hand-Tuned Palette
Carefully balanced for visual consistency
Linear OKLCH Interpolation
From base (500) to white/black — evenly-spaced mathematically, but looks uneven
Lightness: Perceived Brightness
Lightness measures brightness from 0% (black) to 100% (white). Tailwind's curve isn't perfectly straight — it's subtly adjusted for better visual balance in the mid-tones (400-600) and darker shades (800-950) where our eyes are most sensitive.
Chroma: Keeping Colours Vibrant
Chroma measures colourfulness — how vivid vs grey a colour appears. Tailwind maintains higher saturation throughout the scale, keeping colours punchy even at extremes. Linear interpolation loses chroma as it approaches white and black, making colours look washed out.
What's Really Going On Here
Tailwind's curves show two key adjustments: subtle tweaks to lightness in the mid-tones (400-600) and darker shades (800-950), plus maintained saturation throughout the scale. Linear interpolation produces mathematically even steps, but Tailwind's hand-tuning ensures each colour looks like an equal jump in brightness while staying vibrant. That's design driven by how we see, not just what the maths says.
A Brief History of Colour Models
The evolution from monitor phosphors to perceptual colour science.
RGB: Born from Hardware
RGB wasn't designed for humans — it was designed for CRT monitors. Red, green, and blue phosphors were the three colours screens could physically emit, so that's how computers stored colour data. Simple, efficient, but terrible for intuitive colour manipulation.
HSL/HSV: Making RGB Human-Friendly
Designers needed something more intuitive than "mix 143 parts red with 67 parts green." HSL (Hue, Saturation, Lightness) transformed RGB into cylindrical coordinates — pick a colour on the wheel, adjust how vibrant it is, adjust how light or dark. Much better for designers, but still not perceptually uniform.
CIELAB: The First Perceptual Model
The International Commission on Illumination (CIE) introduced Lab, the first colour space designed around human perception. Equal distances in Lab correspond to equal perceived colour differences. Revolutionary for colour science, but the math was complex and it didn't map cleanly to RGB displays.
Web-Safe Colours: Early Digital Constraints
In the early web era, not all monitors could show millions of colours. The "web-safe" palette of 216 colours ensured consistency across 8-bit displays. It wasn't a new model, but it shaped how designers thought about colour on screen — precision through limitation.
OKLCH: Perceptual Colour for Modern UI
Oklab (2020) and its cylindrical form OKLCH combined the best of both worlds: perceptually uniform like Lab, but designed for modern RGB displays and easier to use. CSS adopted it, Tailwind v4 embraced it, and now designers can finally build colour systems that look as balanced as the math suggests they should be.
The Adaptive Future
Colour systems are moving beyond static palettes. Wide-gamut displays, HDR, and adaptive schemes like Material You and macOS tints will make colour dynamic — shifting with context, preference, and light. The future of colour is responsive, accessible, and alive.
From Hardware to Human Vision
For decades, we've used colour models built for hardware convenience (RGB) or mathematical simplicity (HSL), not human perception. OKLCH represents a fundamental shift: colour systems based on how we actually see, not how monitors work. The result is palettes that feel balanced and natural — no endless manual tweaking required.
Learn More
Curated resources to deepen your understanding of colour systems, perceptual models, and design system implementation.
Articles & Research
OKLCH in CSS
Comprehensive guide to using the OKLCH colour space in modern CSS by Andrey Sitnik
Building Your Colour Palette
Refactoring UI's practical guide to creating colour systems for interfaces
A Perceptual Colour Space for Image Processing
Academic paper introducing the Oklab/OKLCH colour model by Björn Ottosson
LCH Colours in CSS
Lea Verou on why LCH is better than HSL for creating colour palettes
Accessible Palette: Stop Using HSL
Why HSL fails for accessibility and what to use instead
Design System Documentation
Tailwind CSS Colours
Official documentation for Tailwind's carefully crafted colour palette
Material Design 3 Colour System
Google's approach to dynamic colour and tone-based palettes
Radix Colours
Open-source colour system optimised for UI design with accessibility
shadcn/ui Theming
Component library theming system using CSS variables and OKLCH
Open Props: Colours
CSS custom properties supercharged with Adam Argyle's colour scales
Carbon Design System Colour
IBM's enterprise design system approach to colour and accessibility
Interactive Tools
Leonardo
Adobe's adaptive colour generator based on target contrast ratios and colour spaces
Huetone
Create accessible colour systems with perceptual colour models
OKLCH Colour Picker & Converter
Interactive tool for working with OKLCH colour space
Accessible Colour Palette Builder
Generate WCAG-compliant colour palettes with real-time contrast checking
Colorbox by Lyft
Algorithmically generate colour sets with accessible contrast ratios
Palettte App
Build, analyse and edit smooth colour palettes
Libraries & Code
Culori
Comprehensive JavaScript colour library with support for all major colour spaces
Chroma.js
Popular colour manipulation library for JavaScript
Color.js
Modern colour science library by CSS Working Group members
TinyColor
Fast, small colour manipulation and conversion library
colord
Tiny yet powerful tool for high-performance colour manipulations
Glossary
- Colour Space
- A mathematical model for representing colours as numbers. Examples: RGB, HSL, OKLCH, CIELAB. Different spaces organize the same colours in different ways.
- Colour Model
- The underlying mathematical structure that defines how colours are calculated and interpolated. Often used interchangeably with "colour space."
- Colour System
- A complete set of colours designed to work together, including their relationships, naming conventions, and usage guidelines. Examples: Tailwind CSS palette, Material Design colours.
- Colour Scheme
- The specific selection and arrangement of colours used in a design. Can be monochromatic, complementary, analogous, triadic, or custom.
- Perceptually Uniform
- A property where equal numerical differences in colour values correspond to equal perceived differences to the human eye. OKLCH and CIELAB are perceptually uniform; RGB and HSL are not.
- Lightness (L)
- In OKLCH, the perceived brightness of a colour from 0% (black) to 100% (white). Different from HSL's "lightness" which isn't perceptually uniform.
- Chroma (C)
- In OKLCH, the colourfulness or saturation — how vivid vs grey a colour appears. Higher values are more saturated. Range typically 0 to 0.4, though varies by hue.
- Hue (H)
- The position on the colour wheel, measured in degrees (0-360°). Red ~30°, Yellow ~90°, Green ~140°, Blue ~250°, Magenta ~330°. Consistent across HSL and OKLCH.
Want to Explore More?
Check out our interactive colour tools to put these concepts into practice.