color-mix()

Baseline 2023 (Chrome 111, Safari 16.2, Firefox 113). Omitir o espaço de cor usa oklab por padrão (Safari 26.2, Chrome, Firefox); mais de duas cores é mais recente (Chrome 150, Firefox 150).

Chrome 111Edge 111Safari 16.2Firefox 113

Mistura duas cores num espaço de cor escolhido, então você deriva cores de hover, tom e borda de um único token de marca sem pré-processador. Misturar em oklab/oklch dá resultados perceptualmente uniformes.

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 uma cor simples primeiro, depois a linha com color-mix(); navegadores sem suporte ficam com a simples.

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

Prompt

Derive cada cor secundária (hover, active, borda, fundo sutil) de uma única custom property `--brand` com `color-mix(in oklab, var(--brand), white|black N%)`. Sempre nomeie o espaço de cor explicitamente (oklab ou oklch) para resultados consistentes, mantenha a cor base como declaração de fallback logo antes, e não fixe variantes em hex.