# color-mix() no CSS: misturar cores direto no navegador

[Canonical HTML page](https://gradiently.design/pt-br/guide/css-color-mix)

O color-mix() deixa o navegador fazer a conta de cores que você fazia num pré-processador ou no olho. Escolha o espaço certo e uma cor da marca gera uma paleta inteira de tons claros, escuros e translúcidos.

## The short version

- A função color-mix do CSS mistura duas cores em um espaço de cor nomeado, por exemplo color-mix(in oklab, #7c3aed 40%, white).
- Se você informar só uma porcentagem, a outra cor recebe o restante; sem nenhuma, a mistura é meio a meio.
- Misturar em oklab mantém a luminosidade uniforme e evita os meios acinzentados que a mistura em sRGB produz entre matizes distantes.
- Misturar uma cor com transparent é o jeito mais limpo de criar uma versão translúcida de uma cor guardada em uma propriedade personalizada.
- O color-mix() funciona em todos os principais navegadores atuais, então é seguro em produção com uma cor simples como plano B para os muito antigos.

A função **color-mix do CSS**, `color-mix()`, mistura duas cores em um espaço de cor que você escolhe e devolve uma cor nova. Escreva `color-mix(in oklab, #7c3aed 40%, white)` e você obtém um violeta claro com 40 por cento de violeta e 60 por cento de branco, misturados de forma perceptiva. Ela funciona em todos os principais navegadores atuais. Combinada com propriedades personalizadas, transforma uma cor da marca em tons claros, escuros, estados de hover e sobreposições translúcidas sem um único hex fixo no código.

## Sintaxe do color-mix()

```css
/* color-mix(in <colour space>, <colour> [<percentage>], <colour> [<percentage>]) */

.a { color: color-mix(in oklab, #7c3aed, white); }          /* 50% each */
.b { color: color-mix(in oklab, #7c3aed 40%, white); }      /* 40% violet, 60% white */
.c { color: color-mix(in oklab, #7c3aed, black 30%); }      /* 70% violet, 30% black */
.d { color: color-mix(in srgb, #7c3aed 50%, transparent); } /* violet at half opacity */
.e { color: color-mix(in oklch shorter hue, #2563eb, #f59e0b); }
```

O espaço de cor vem primeiro e é escrito por extenso. Espaços baseados em matiz, como oklch e hsl, também aceitam uma direção de matiz: shorter, longer, increasing ou decreasing.

| Você escreve | O navegador usa | Observações |
| --- | --- | --- |
| Sem porcentagens | 50% e 50% | Uma mistura igual |
| Uma porcentagem, digamos 30% | 30% e 70% | A outra cor recebe o restante |
| Duas que somam 100% | Como escrito | A forma mais clara de ler depois |
| Duas que somam mais de 100% | Reduzidas para 100% | 60% e 60% se comporta como 50% e 50% |
| Duas que somam menos de 100% | Ampliadas, depois tornadas translúcidas | 20% e 30% dá um resultado com meia opacidade |

Como as porcentagens se resolvem. A última linha surpreende: um total abaixo de 100 deixa o resultado parcialmente transparente.

## Em que espaço de cor misturar

O espaço de cor decide o caminho entre as duas cores. Em sRGB o navegador faz a média dos números de vermelho, verde e azul, o que é fácil de raciocinar, mas não é como os olhos enxergam. Dois matizes distantes passam por um cinza opaco no caminho. Em oklab a mistura segue a luminosidade e a cor percebidas, então o meio fica limpo e os passos parecem uniformes. [Interpolação de gradientes](https://gradiently.design/pt-br/guide/gradient-interpolation) explica a mesma escolha para gradientes, e o efeito é mais fácil de ver lá.

- sRGB: cinza chapado no meio: `linear-gradient(to right, #0000ff, #ffff00)`
- oklab: meio mais claro e limpo: `linear-gradient(in oklab to right, #0000ff, #ffff00)`
- oklch: viaja por ciano e verde: `linear-gradient(in oklch to right, #0000ff, #ffff00)`

Azul para amarelo em três espaços. O ponto médio de cada faixa é exatamente o que `color-mix()` devolve a 50 por cento nesse espaço: `#808080` em sRGB, um cinza-azulado claro em oklab.

- **oklab** para tons claros, escuros e a maior parte das misturas do dia a dia. Luminosidade uniforme, sem queda para o cinza.
- **oklch** quando você quer que o matiz viaje, por exemplo ao misturar duas cores da marca numa terceira que fique entre elas no círculo cromático.
- **srgb** para misturar com `transparent` ou para combinar com ferramentas de design antigas que misturam em sRGB.
- **srgb-linear** para mistura de luz fisicamente baseada, que parece mais brilhante no meio.

Para entender por que os espaços perceptivos se comportam melhor, veja [OKLCH explicado](https://gradiently.design/pt-br/guide/oklch-explained). Versões recentes da especificação permitem omitir o espaço de cor e usar oklab por padrão, mas o suporte a esse atalho é mais novo, então escreva `in oklab` explicitamente.

## Tons claros e escuros a partir de uma cor da marca

O padrão mais útil é uma escala construída a partir de uma única variável. Misture em direção ao branco para tons claros e ao preto para tons escuros. Mude a variável e todos os passos se atualizam, o que é ideal para produtos com várias marcas ou temas escolhidos pelo usuário.

```css
:root {
  --brand: #7c3aed;

  --brand-100: color-mix(in oklab, var(--brand) 20%, white);
  --brand-200: color-mix(in oklab, var(--brand) 40%, white);
  --brand-300: color-mix(in oklab, var(--brand) 60%, white);
  --brand-400: color-mix(in oklab, var(--brand) 80%, white);
  --brand-500: var(--brand);
  --brand-600: color-mix(in oklab, var(--brand) 80%, black);
  --brand-700: color-mix(in oklab, var(--brand) 60%, black);
}
```

Uma escala de sete passos a partir de uma cor. Troque `--brand` por qualquer hex e a escala acompanha.

- brand-100: #e1dbff
- brand-200: #c5b7fe
- brand-300: #aa92fa
- brand-400: #926bf4
- brand-500: #7c3aed
- brand-600: #5a28b0
- brand-700: #3b1877

No que a escala acima se resolve para `#7c3aed`, calculada em oklab. Misturados em sRGB, os tons claros saem um pouco mais cinzentos e os escuros um pouco mais chapados.

Misturar com branco e preto puros é um ponto de partida. Para tons claros mais quentes, misture em direção a um off-white como `#fdf6ec`; para tons escuros mais ricos, misture em direção a um azul-marinho profundo em vez de preto. Assim a escala continua parecendo a sua marca, e não uma rampa genérica. [Tintas, tons e sombras](https://gradiently.design/pt-br/guide/tints-tones-shades) trata da teoria das cores.

## Transparência com color-mix()

Antes do `color-mix()`, criar uma versão translúcida de uma cor guardada em uma variável exigia guardar os canais separadamente. Agora você mistura com `transparent`. A quantidade que você mantém é a opacidade.

```css
.badge {
  color: var(--brand);
  background: color-mix(in srgb, var(--brand) 12%, transparent);
  border: 1px solid color-mix(in srgb, var(--brand) 30%, transparent);
}

.button:hover {
  background: color-mix(in oklab, var(--brand), black 12%);
}
```

Um selo tingido e um estado de hover a partir da mesma variável. Sem uma segunda cor para manter.

## Erros comuns com o color-mix()

- **Omitir o espaço de cor** em código que precisa rodar em navegadores antigos. A declaração inteira é descartada, não só o espaço.
- **Misturar com preto para todo tom escuro.** Tons escuros de cores saturadas ficam opacos; misture em direção a uma versão profunda do próprio matiz.
- **Esperar que porcentagens abaixo de 100 continuem opacas.** `color-mix(in oklab, red 20%, blue 30%)` fica meio transparente.
- **Usar hsl para tons claros.** A luminosidade em hsl não é perceptiva, então um amarelo e um azul na mesma mistura não parecem o mesmo passo.

## Suporte dos navegadores e planos B

O `color-mix()` está disponível no Chrome, Edge, Firefox e Safari desde 2023, e o suporte atual está listado no [caniuse](https://caniuse.com/mdn-css_types_color_color-mix). Se precisar cobrir navegadores muito antigos, declare primeiro uma cor simples e deixe a misturada sobrescrevê-la. Navegadores que não entendem a segunda linha a ignoram.

```css
.card {
  background: #ede9fe;
  background: color-mix(in oklab, var(--brand) 15%, white);
}
```

Plano B primeiro, aprimoramento depois. A cascata faz o resto.

Um tema completo construído sobre esses padrões, com modos claro e escuro, está em [variáveis CSS para temas](https://gradiently.design/pt-br/guide/css-custom-properties-theming).

## Misturar cores para gradientes

O `color-mix()` é útil dentro de gradientes, onde pode calcular um ponto intermediário a partir de duas cores da marca para que a mistura nunca passe por lama. `linear-gradient(135deg, var(--a), color-mix(in oklch, var(--a), var(--b)), var(--b))` dá um terceiro ponto no caminho de matiz entre as duas. O problema de fundo é tratado em [gradientes sujos](https://gradiently.design/pt-br/guide/muddy-gradients).

Se a cor da sua marca vive em um Mark do Gradiently, a receita do Mark já traz uma família de cores relacionadas escolhidas para funcionar juntas, e o Mercado permite buscar por palavras de cor como "violeta profundo" para achar um construído em torno do matiz de que você parte.

## FAQ

### O que o color-mix() faz no CSS?

Mistura duas cores em um espaço de cor que você nomeia e devolve o resultado, por exemplo `color-mix(in oklab, red 30%, white)`.

### Qual espaço de cor devo usar com o color-mix()?

Use oklab para tons claros, escuros e a maior parte das misturas, oklch quando quiser que o matiz viaje e srgb para misturar com transparent.

### Como deixo uma cor transparente com o color-mix()?

Misture-a com `transparent`: `color-mix(in srgb, var(--brand) 20%, transparent)` dá a cor da marca a 20 por cento de opacidade.

### O color-mix() é compatível com todos os navegadores?

Funciona nas versões atuais do Chrome, Edge, Firefox e Safari. Declare primeiro uma cor simples como plano B para navegadores mais antigos.

### O que acontece se as porcentagens não somam 100?

Totais acima de 100 são reduzidos. Totais abaixo de 100 são ampliados e o resultado fica parcialmente transparente.