CSS Color Monster CSS Color Monster

Relative Color Syntax

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

0
0
0deg
Original #6366f1
Transformed 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)