Relative Color Syntax

Quick implementation

:root {
  /* Define your base color */
  --accent: oklch(0.65 0.22 260);

  /* Derive lighter/darker variants using 'from' */
  --accent-light: oklch(from var(--accent) calc(l + 0.25) c h);
  --accent-dark: oklch(from var(--accent) calc(l - 0.25) c h);
  
  /* Shift the hue */
  --accent-shift: oklch(from var(--accent) l calc(h + 45) c);
}

.swatch-light {
  background: var(--accent-light);
}

Prompt this to your LLM

Includes role, constraints, two framework variants, and edge cases to handle.

Act as a CSS expert. Write a CSS snippet demonstrating the Relative Color Syntax using oklch().

Requirements:
1. Define a base color variable (e.g., --primary).
2. Create derived variables for light, dark, and a hue-shifted variant using the 'oklch(from ...)' syntax.
3. Show how to use these in a simple card component.
4. Ensure all colors use oklch() format.
5. Include comments explaining the 'calc()' math used for lightness and hue shifts.

Output only the CSS code block.

Why this matters in 2026

Relative color syntax eliminates the need for preprocessor math or complex JavaScript utilities to generate color palettes. By calculating derived colors directly in the browser, you maintain a single source of truth for your theme variables. This significantly reduces bundle size and simplifies maintenance when updating brand colors.

The logic

The syntax uses the oklch(from var(--color) l c h) function to extract components from an existing variable. You can then apply calc() to specific channels like lightness (l) or hue (h) while preserving the others. This allows for dynamic contrast adjustments and consistent tint/shade generation without hardcoding new values.

Accessibility & performance

Because these calculations happen in the browser's rendering engine, there is no runtime JavaScript overhead. However, ensure that derived lightness values maintain sufficient contrast ratios against background colors. Modern browsers handle these conversions efficiently, but fallbacks should be provided for older environments that do not support oklch().