One Color to Rule Them All: Relative CSS Colors in Practice

Choosing separate colors for text, borders, hover states, active states, and backgrounds is one of the most repetitive—and unnecessary—parts of frontend work. Every new component means another round of “What should the hover color be?” or “Can design give us a darker shade?” Modern CSS gives us a better way.

In this talk, we’ll explore how relative CSS colors let you generate an entire color system from a single base value. Using color-mix(), OKLCH, and custom properties, you can derive hover, active, border, and subtle background colors automatically.

I’ll walk through an example of building a fully interactive button with just one color token, then generating all its states directly in CSS. You’ll see how this approach improves consistency, simplifies theming, and dramatically speeds up collaboration between design and engineering.

You’ll leave with practical patterns you can drop into your design system today—and a new way of thinking about color on the web.