# color-mix()

Estado: 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).  
Fuente: https://webkit.org/blog/17640/webkit-features-for-safari-26-2/ and https://developer.mozilla.org/en-US/docs/Mozilla/Firefox/Releases/150  
Página: https://designforai.dev/es/css/color-mix

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.

## HTML

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

## CSS

```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; }
```

Fallback: Declara primero un color plano y después la línea con color-mix(); los navegadores sin soporte se quedan con el plano.

## 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.