color-mix()

Baseline 2023 (Chrome 111, Safari 16.2, Firefox 113). Omitting the color space defaults to oklab (Safari 26.2, Chrome, Firefox); more than two colors is newer (Chrome 150, Firefox 150).

Chrome 111Edge 111Safari 16.2Firefox 113

Mixes two colors in a chosen color space, so you can derive hover, tint and border colors from one brand token without a preprocessor. Mixing in oklab/oklch gives perceptually even results.

CSS

.fx-006{
  --brand:#2563eb;
  background:var(--brand);color:#fff;border:1px solid color-mix(in oklab,var(--brand),black 25%);
  padding:10px 18px;border-radius:8px;font:600 15px system-ui;
}
.fx-006:hover{background:color-mix(in oklab,var(--brand),white 15%)}
.fx-006:active{background:color-mix(in oklab,var(--brand),black 15%)}
.fx-006 :is(a,button,input,select,textarea):focus-visible { outline: 2px solid currentColor; outline-offset: 2px; }

HTML

<button class="fx-006">Mixed hover</button>

Fallback: Declare a plain color first, then the color-mix() line; unsupported browsers keep the plain one.

Source: webkit.org/blog/17640/webkit-features-for-safari-26-2/ and https://developer.mozilla.org/en-US/docs/Mozilla/Firefox/Releases/150

Prompt

Derive every secondary color (hover, active, border, subtle background) from a single `--brand` custom property with `color-mix(in oklab, var(--brand), white|black N%)`. Always name the color space explicitly (oklab or oklch) for consistent results, keep the base color as a preceding fallback declaration, and do not hard-code hex variants.