Relative Color Syntax

Create color variations using CSS oklch(from ...).

0
0
0deg
Original
#6366f1 oklch(...)
Transformed
#6366f1 oklch(...) 
/* Set your base color */
--brand: #6366f1;

/* Apply transformation */
color: oklch(from var(--brand) l c h);

Browser Support

Relative color syntax is supported in Chrome 119+, Safari 16.4+, and Firefox 128+. Learn more on MDN .

What is Relative Color Syntax?

CSS relative color syntax allows you to create new colors based on existing ones, directly in your stylesheet. Instead of pre-calculating color variants, you can derive them dynamically using the from keyword.

Syntax Structure

oklch(from origin-color L C H / alpha)
  • origin-color - The base color to transform (can be a variable, hex, or any valid color)
  • L - Lightness channel (use l to reference the original, or calc(l + 0.2) to modify)
  • C - Chroma/saturation channel
  • H - Hue channel (in degrees)

Common Use Cases

Hover States

oklch(from var(--btn) calc(l - 0.1) c h)

Text on Colored Backgrounds

oklch(from var(--bg) calc(l < 0.5 ? 0.95 : 0.15) 0 h)

Complementary Colors

oklch(from var(--brand) l c calc(h + 180))

Muted Variants

oklch(from var(--accent) l calc(c * 0.5) h)

FAQ

How does the from keyword work?

from takes any valid color — a hex code, an rgb() value, or a CSS custom property — and exposes its channels as the variables l, c, and h (or r, g, b for rgb-based functions) inside the color function. Reference them directly, or feed them through calc() to shift them.

What can I do with calc() on the channels?

Anything CSS math allows: calc(l + 0.2) lightens, calc(l - 0.2) darkens, calc(c * 0.5) mutes the saturation, and calc(h + 180) flips to the complementary hue. Because it runs in the browser, the result updates live if the origin color changes.

Which browsers support relative color syntax?

Chrome 119+, Safari 16.4+, and Firefox 128+ all support it. Firefox was the last of the major engines to ship it, so double-check your audience if you need to support older Firefox versions specifically.

How is this different from color-mix()?

color-mix() blends two separate colors together. Relative color syntax transforms the channels of a single color — lightening, desaturating, or rotating its hue — without needing a second color at all.