# color-mix()

Status: 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).  
Fonte: 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/pt/css/color-mix

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.

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

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