> Markdown version of [/events/world-congress-2026-europe/sessions/992-one-color-to-rule](https://www.wearedevelopers.com/events/world-congress-2026-europe/sessions/992-one-color-to-rule). Every page supports `.md` or `Accept: text/markdown`. Links point to the HTML versions so they work for humans too. Agent guide: [/agents.md](https://www.wearedevelopers.com/agents.md).

---

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


- **Date:** Thursday, Jul 9, 2026
- **Time:** 10:25–10:35 (10 min)
- **Room:** Airstream 2
- **Event:** World Congress 2026 Europe

## Recording

[Watch recording](https://www.wearedevelopers.com/videos/100016-one-color-to-rule-them-all-relative-css-colors-in-practice)

## Description

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.

## Speaker

### [Mert Akça](https://www.wearedevelopers.com/@mert-akca)

Software Engineer at SAP


## Related talks at this congress

- [Code Style in Practice: Balancing Preferences and Consistency](https://www.wearedevelopers.com/events/world-congress-2026-europe/sessions/1046-code-style-in) — Angelika Shvets
- [Microfrontends: Lessons Learned from Growing a Design System and Shared Libraries Across 20+ teams](https://www.wearedevelopers.com/events/world-congress-2026-europe/sessions/1160-microfrontends) — Erasmo Hernandez
- [Colorful quantum randomness](https://www.wearedevelopers.com/events/world-congress-2026-europe/sessions/1034-colorful-quantum) — Jakub Gaj
- [Type Systems You Might Not Know (But Will Love)](https://www.wearedevelopers.com/events/world-congress-2026-europe/sessions/1042-type-systems-you) — Veit Heller