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:34 min

Overcoming constraints in web color palettes

Jeremy Keith · WWC 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

6:37 min

Strategies for keeping up with advanced CSS evolution

Onur Gumus · LIVE

More from World Congress 2026 Europe

Building the Nervous System of AI - Michael Kagan (NVIDIA) thumbnail
29:17
about 1 month 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
about 1 month 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
about 1 month 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
about 1 month 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
about 1 month 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
about 1 month 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

Architecting AI in Angular: WebMCP, A2UI, and the Agent Experience

Ankita Sood

Sr. Principal Engineer @ Secureworks | Angular GDE

Ankita Sood
Open session

World Congress 2026 North America

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

How to generate business value through performance optimizations

Nikolai Sidiropulo

Software Engineer at Meta

Nikolai Sidiropulo
Open session

World Congress 2026 North America

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

Vibe Coding Accessibility

Karl Groves

Focused on actively fixing accessibility

Karl Groves
Open session

World Congress 2026 North America

When Humans Stop Writing Code: Rethinking Languages, Compilers, and Responsibility

Simon Auer

Organizer of flutter vienna meetup and CEO of marqably

Simon Auer

Related videos

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

What's new in CSS for Designers?

Onur Gumus

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

Learn Enough Design to Be Dangerous

Kathryn Grayson Nanz

What’s New and What’s Next in Web UI thumbnail
22:46
WWC 2024 • almost 2 years ago

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

Cleyra Uzcategui

WeAreDevelopers LIVE - CSS or BS? thumbnail
52:59
LIVE • 4 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

Future-Proof CSS thumbnail
37:55
WWC 2022 • about 4 years ago

Future-Proof CSS

Ire Aderinokun

Related articles

From learning to earning

Jobs that call for the skills explored in this talk.