Relative CSS Colors, light-dark(), contrast-color(), and Progressive Enhancement

Use relative colors for real relationships

A relative color can reuse and calculate channels from an origin color.

:root {
  --brand: #2563eb;
  --brand-hover: #1d4ed8;
}

@supports (color: oklch(from red l c h)) {
  :root {
    --brand-hover: oklch(from var(--brand) calc(l - .07) c h);
  }
}

Opt into the light and dark color schemes

light-dark() reacts to the used color scheme.

:root {
  color-scheme: light dark;
  --surface: #ffffff;
}

@supports (color: light-dark(white, black)) {
  :root {
    --surface: light-dark(#ffffff, #0f172a);
  }
}

Use contrast-color() with measured caution

The function returns black or white, but a mid-tone background can still be problematic.

1. 1

   Calculate a black-or-white fallback.

2. 2

   Record the actual contrast ratio.

3. 3

   Use contrast-color() only after the fallback declaration.

4. 4

   Change the background when neither black nor white meets the intended requirement.

5. 5

   Retest small text, large text, icons, and focus indicators separately.

Gate each feature independently

Support can differ between modern functions.

• Test color-mix() separately from relative colors.
• Test light-dark() separately from contrast-color().
• Do not place unrelated features in one @supports condition unless they must fail together.
• Use CSS.supports() for current-runtime diagnostics, not universal claims.

Review user color preferences

A generated palette is not the final rendered experience for every user.

• Test forced-colors mode.
• Review prefers-contrast behavior when the product supports it.
• Do not suppress browser-adjusted colors without a documented reason.
• Keep semantic meaning independent from color alone.

Track specification maturity

CSS Color 5 is still evolving.

Frequently asked questions

Primary references

These sources support the standards and technical explanations in this guide. Color Pick recommendations and product-specific limitations are identified separately in the article.

1. Using relative colorsMDN Web Docs
2. light-dark() CSS functionMDN Web Docs
3. contrast-color() CSS functionMDN Web Docs
4. CSS Color Module Level 5W3C