Why we built Binectics on oklch

When you operate a design system across five accent colours, three product surfaces, and dozens of generated tints, you need a colour space that behaves predictably. sRGB hex doesn't. HSL barely does. oklch does.

oklch (Oklab Lightness, Chroma, Hue) is a perceptually uniform colour space — meaning a 10-point lightness step looks equally bright to the human eye regardless of hue. That property unlocks something powerful: you can generate palettes programmatically and trust the output.

Our token layer defines each role colour as a single oklch triplet. From that, we derive soft backgrounds, hover states, text-on-background pairs, and chart colours — all with simple arithmetic on the L and C channels. No hand-tuning, no 'this green looks brighter than that blue' debates.

The practical upside: when we added the --consumer role colour (oklch 0.58 0.14 320), every component that consumes a role token — badges, chart segments, sidebar accents — picked it up automatically. Zero design review needed.

Browser support landed in Chrome 111, Safari 15.4, and Firefox 113. For the <1% of traffic on older browsers, CSS falls back gracefully to the nearest sRGB equivalent. We haven't heard a single support ticket about it.

If you're starting a design system today, start in oklch. The tooling has caught up, the spec is stable, and the ergonomic gain over hex/hsl compounds with every token you add.