Color Systems: RGB, HSL, and OKLCH
Why OKLCH is replacing HSL in 2026 design systems.
For decades web developers used hex and RGB. HSL gave us human-friendly hue/saturation/lightness. Now OKLCH gives us perceptual uniformity, and design systems are switching.
RGB and Hex
color: rgb(255 102 51);
color: #ff6633;
Direct hardware representation. Useless for choosing related colors — bumping the green channel does not produce a "darker" or "lighter" version of the same hue.
HSL
color: hsl(15, 100%, 60%);
H = hue (0-360), S = saturation, L = lightness. Better for color math, but lightness is not perceptually uniform — yellow at 50% lightness looks much brighter than blue at 50%.
OKLCH
color: oklch(0.7 0.18 30);
L = perceptual lightness, C = chroma, H = hue. Two colors with the same L look equally bright to the human eye. This makes systematic color generation finally work.
Why It Matters
Building a color scale from a single brand color used to require a designer to hand-tune each step. With OKLCH:
--brand-100: oklch(0.95 0.05 250);
--brand-500: oklch(0.65 0.18 250);
--brand-900: oklch(0.25 0.10 250);
Same hue, descending lightness, all visually consistent.
Wide Gamut Support
OKLCH naturally describes Display P3 colors that sRGB cannot represent:
color: oklch(0.7 0.30 30); / high chroma, exceeds sRGB /
Modern displays render this; older displays gamut-map automatically.
Browser Support
OKLCH ships in all evergreen browsers since 2023. For older support, design in OKLCH and compile to RGB/HSL fallbacks via PostCSS.
Tools
The [Color Picker](https://sdk.is/color-picker) shows the same color in RGB, HSL, and OKLCH side by side.
For dark mode systems, OKLCH lets you derive the dark variant from the light by inverting L while keeping C and H.