WeAreDevelopers Logo WeAreDevelopers
Sign in
For You LIVE
World Congress 2026 Europe • Jul 9, 2026 • Session details

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

Mert Akça

Stop hand-picking rigid hex codes for every UI state. Learn how relative CSS colors let you automatically generate scalable, accessible palettes from a single base token.

Pause
Mute Enter Fullscreen
#1 about 2 min

Overview of standard CSS color formats and OKLCH

Standard web color models function differently, with OKLCH offering an algorithm aligned uniquely with human visual perception.

#2 about 2 min

Generating color variants directly via relative CSS syntax

The relative colors specification enables automatic generation of new hues by shifting lightness and chroma values from base definitions.

#3 about 3 min

Scaling design system components with a single base token

Defining border and interaction states mathematically from one token eliminates the need to manually manage endless style variables.

#4 about 2 min

Automating custom themes and accessible contrast via CSS rules

Setting contrast logic against base colors guarantees that user-provided application themes inherently meet accessibility standards.

#5 about 2 min

Collaborating with designers on relative CSS color rules

Shifting design collaboration from hardcoded color choices to bounded mathematical rules simplifies design handoffs and long-term maintenance.

Matching moments

2:49 min

Generating structured color palettes using interactive CSS variable editors

Dan Cranney +2 · LIVE

4:43 min

Managing consistent color contrast using the oklch space

Onur Gumus · LIVE

1:03 min

Leveraging modern CSS capabilities for theming and contrast

Chris Heilmann +2 · LIVE

1:34 min

Overcoming constraints in web color palettes

Jeremy Keith · World Congress 2021

3:39 min

Creating automated color ramps and foundational tokens for accessible designs

Geri Reid · A11y + AI

2:04 min

Introduction to modern CSS capabilities for designers

Onur Gumus · LIVE

More from World Congress 2026 Europe

Building the Nervous System of AI - Michael Kagan (NVIDIA) thumbnail
29:17
2 months ago

Building the Nervous System of AI - Michael Kagan (NVIDIA)

Michael Kagan, Sead Ahmetović

Five Things in Tech that Matter Now - WeAreDevelopers World Congress 2026 Closing Keynote thumbnail
19:41
2 months ago

Five Things in Tech that Matter Now - WeAreDevelopers World Congress 2026 Closing Keynote

Christian Heilmann

The Sound of Your Secrets: Teaching Your Model to Spy, So You Can Learn to Defend thumbnail
32:06
2 months ago

The Sound of Your Secrets: Teaching Your Model to Spy, So You Can Learn to Defend

David vonThenen

Super scaling for the Super Bowl: How to survive 30 million users hitting your backend in 30 minutes thumbnail
35:13
2 months ago

Super scaling for the Super Bowl: How to survive 30 million users hitting your backend in 30 minutes

Irina Branovic

Running Secure Life Science Research at Scale using Hybrid GPU HPC and Kubernetes 🧬 thumbnail
24:23
2 months ago

Running Secure Life Science Research at Scale using Hybrid GPU HPC and Kubernetes 🧬

Jeremy Murray

Angstfreude - AI and Corporate Culture - The Thrill and the Threat thumbnail
30:26
2 months ago

Angstfreude - AI and Corporate Culture - The Thrill and the Threat

Axel Ebert, Karin Krobath

Upcoming sessions on this topic

Open session

World Congress 2026 North America

September 24, 2026 · 12:50–13:20

Stage 7

Architecting Agentic Apps: WebMCP, A2UI, and Agent Experience

Ankita Sood

Sr. Principal Engineer @ Secureworks | Angular GDE

Ankita Sood
Open session

World Congress 2026 North America

September 25, 2026 · 11:00–11:30

Stage 6

Secure-by-Inclusion: Preventing Accessibility Barriers from Becoming Security Vulnerabilities

Radostina (Ina) Tsvetkova

Norwegian Directorate of Labour and Welfare (NAV), Senior Advisor in Digital Accessibility and Inclusive Design

Radostina (Ina) Tsvetkova
Open session

World Congress 2026 North America

September 24, 2026 · 14:50–15:20

Stage 9

How to generate business value through performance optimizations

Nikolai Sidiropulo

Software Engineer at Meta

Nikolai Sidiropulo
Open session

World Congress 2026 North America

September 25, 2026 · 15:30–16:00

Stage 6

Small LLM in your Browser: Huge Opportunities for Web Applications

Daniel Ostrovsky

UI/UX Architect at Payoneer | AI Architect | Full Cycle Development Expert | Public Speaker | Open Source Contributor |

Daniel Ostrovsky
Open session

World Congress 2026 North America

September 25, 2026 · 09:40–10:10

Stage 5

Vibe Coding Accessibility

Karl Groves

Focused on actively fixing accessibility

Karl Groves
Open session

World Congress 2026 North America

September 24, 2026 · 11:40–12:10

Stage 7

Clean Rooms Demystified: Architecture and Patterns for Privacy-Safe Data Collaboration

Anurag Malik

Data Tech Lead @ Intuit

Anurag Malik

Related videos

What's new in CSS for Designers? thumbnail
59:20
LIVE • almost 3 years ago

What's new in CSS for Designers?

Onur Gumus

Learn Enough Design to Be Dangerous thumbnail
1:02:13
LIVE • over 3 years ago

Learn Enough Design to Be Dangerous

Kathryn Grayson Nanz

Designing for Every Direction: Logical CSS for Global, Adaptive, and Effortlessly Reversible UIs thumbnail
33:03
Europe 2026 Virtual • 2 months ago

Designing for Every Direction: Logical CSS for Global, Adaptive, and Effortlessly Reversible UIs

Vidhya Krishnamoorthy

What’s New and What’s Next in Web UI thumbnail
22:46
World Congress 2024 • about 2 years ago

What’s New and What’s Next in Web UI

Cleyra Uzcategui

WeAreDevelopers LIVE - CSS or BS? thumbnail
52:59
LIVE • 5 months ago

WeAreDevelopers LIVE - CSS or BS?

Chris Heilmann, Daniel Cranney, Keith Cirkel

WeAreDevelopers LIVE - 50 years Microsoft, Web Readiness Report, The German Web Community and more thumbnail
1:04:50
LIVE • over 1 year ago

WeAreDevelopers LIVE - 50 years Microsoft, Web Readiness Report, The German Web Community and more

Chris Heilmann, Daniel Cranney, Christian Schaefer

Related articles

From learning to earning

Jobs that call for the skills explored in this talk.