color-mix()

Baseline 2023 (Chrome 111, Safari 16.2, Firefox 113). Omitir el espacio de color usa oklab por defecto (Safari 26.2, Chrome, Firefox); más de dos colores es más reciente (Chrome 150, Firefox 150).

Chrome 111Edge 111Safari 16.2Firefox 113

Mezcla dos colores en el espacio de color que elijas, así que puedes derivar colores de hover, tinte y borde a partir de un solo token de marca sin preprocesador. Mezclar en oklab/oklch da 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: Declara primero un color plano y después la línea con color-mix(); los navegadores sin soporte se quedan con el plano.

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

Prompt

Deriva todos los colores secundarios (hover, active, borde, fondo sutil) de una sola custom property `--brand` con `color-mix(in oklab, var(--brand), white|black N%)`. Nombra siempre el espacio de color de forma explícita (oklab u oklch) para obtener resultados consistentes, mantén el color base como declaración de respaldo justo antes y no escribas variantes hex a mano.