Reference · CSS

CSS color Modern color, with a way back.

Nine recipes for color in today’s CSS. Each one is the smallest useful piece of CSS for a real job, with the fallback an older browser keeps, a live example of both, support data with its review date, and a record of three engines running it.

Browse the recipes How they are checked
  1. 01oklch()
  2. 02color-mix()
  3. 03Relative colors
  4. 04light-dark()
  5. 05Display P3
  6. 06Gradients in OKLCH
  7. 07accent-color
  8. 08contrast-color()
  9. 09Forced colors
CSS recipes
9
Support reviewed
11 October 2026
Engines tested
Chromium · Firefox · WebKit

The recipes

Nine jobs, nine pieces of CSS

Each card is drawn with its own recipe, so a browser without the feature shows the fallback right here.

  • 01Widely available

    oklch()

    Author in OKLCH; every hex fallback matches

    Chrome 111 · Firefox 113 · Safari 15.4

  • 02Widely available

    color-mix()

    One brand color, every tint and hover

    Chrome 111 · Firefox 113 · Safari 16.2

  • 03Newly available

    Relative colors

    Derive states with oklch(from …)

    Chrome 125 · Firefox 128 · Safari 18

  • 04Newly available

    light-dark()

    Two themes, one line each

    Chrome 123 · Firefox 120 · Safari 17.5

  • 05Widely available

    Display P3

    Richer color where the screen can show it

    Chrome 111 · Firefox 113 · Safari 15

  • 06Newly available

    Gradients in OKLCH

    Blue to yellow without the grey

    Chrome 111 · Firefox 127 · Safari 16.2

  • 07Limited availability

    accent-color

    Brand the native form controls

    Chrome 93 · Firefox 92 · Safari 26.2

  • 08Newly available

    contrast-color()

    Black or white, chosen by the browser

    Chrome 147 · Firefox 146 · Safari 26

  • 09Widely available

    Forced colors

    Survive Windows contrast themes

    Chrome 89 · Firefox 89 · Safari 16

At a glance

Support across the core browsers

Support reviewed on against web-features 98723fd and browser-compat-data 3b28abe.

First supporting version of each recipe’s main feature
RecipeBaseline statusChromeEdgeFirefoxSafariYour browser
oklch()Widely available11111111315.4
color-mix()Widely available11111111316.2
Relative colorsNewly available12512512818
light-dark()Newly available12312312017.5
Display P3Widely available11111111315
Gradients in OKLCHNewly available11111112716.2
accent-colorLimited availability93939226.2
contrast-color()Newly available14714714626
Forced colorsWidely available89798916
  • Widely availableEvery core browser, for 30 months or more
  • Newly availableEvery core browser, recently
  • Limited availabilityNot yet in every core browser

Method

How each recipe is checked

  1. Support data has a date. Versions and Baseline status come from the web-features project and MDN’s browser-compat-data, read at a fixed commit and printed with the day they were reviewed.

  2. Fallbacks are computed. Every fallback color is worked out with this site’s color engine from the modern value, so the two match wherever sRGB can show the color.

  3. The fallback is shown, not described. The right-hand example renders the same CSS with the feature’s syntax made unknown, so the browser drops exactly what an older browser would.

  4. Three engines run it. Chromium, Firefox and WebKit each render both versions; the colors are read back from the screen and compared with the expected values.

Run on in Chromium 147.0.7727.15, Firefox 148.0.2 and WebKit 26.4, with Playwright.

Background

The ideas behind the recipes

Read more

Tools

References

Go to the source