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

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

O color-mix() deixa o navegador fazer a matemática das cores que antes fazias num pré-processador ou a olho. Escolhe o espaço de cor certo e uma cor de marca pode produzir uma paleta inteira de tons claros, escuros e translúcidos.

## The short version

- A função CSS color-mix mistura duas cores num espaço de cor nomeado, por exemplo color-mix(in oklab, #7c3aed 40%, white).
- Se indicares só uma percentagem, a outra cor fica com o resto; sem nenhuma, a mistura é metade e metade.
- Misturar em oklab mantém a luminosidade uniforme e evita os meios cinzentos que a mistura em sRGB produz entre tons distantes.
- Misturar uma cor com transparent é a forma mais limpa de fazer uma versão translúcida de uma cor guardada numa propriedade personalizada.
- O color-mix() funciona em todos os principais navegadores atuais, por isso é seguro em produção, com uma cor simples como alternativa para os muito antigos.

A função **color-mix em CSS**, `color-mix()`, mistura duas cores num espaço de cor à tua escolha e devolve uma nova cor. Escreve `color-mix(in oklab, #7c3aed 40%, white)` e obténs um violeta pálido com 40 por cento de violeta e 60 por cento de branco, misturado de forma percetual. Funciona em todos os principais navegadores atuais. Aliada às propriedades personalizadas, transforma uma cor de marca em tons claros, escuros, estados de rato por cima 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 escreve-se por extenso. Os espaços baseados em tom, como oklch e hsl, também aceitam uma direção de tom: shorter, longer, increasing ou decreasing.

| Escreves | O navegador usa | Notas |
| --- | --- | --- |
| Sem percentagens | 50% e 50% | Uma mistura igual |
| Uma percentagem, digamos 30% | 30% e 70% | A outra cor fica com o resto |
| Duas que somam 100% | Como escrito | A forma mais clara de ler mais tarde |
| Duas que somam mais de 100% | Reduzidas a 100% | 60% e 60% comporta-se como 50% e 50% |
| Duas que somam menos de 100% | Aumentadas, e depois tornadas translúcidas | 20% e 30% dá um resultado com metade da opacidade |

Como se resolvem as percentagens. A última linha surpreende as pessoas: um total abaixo de 100 torna 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 é rápido de raciocinar mas não é como os olhos veem. Dois tons distantes passam por um cinzento baço pelo caminho. Em oklab, a mistura segue a luminosidade e a cor percebidas, por isso o meio fica limpo e os passos parecem uniformes. A [interpolação de gradientes](https://gradiently.design/pt-pt/guide/gradient-interpolation) explica a mesma escolha para gradientes, e aí o efeito vê-se mais facilmente.

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

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

- **oklab** para tons claros, escuros e a maioria das misturas do dia a dia. Luminosidade uniforme, sem queda para cinzento.
- **oklch** quando queres que o tom viaje, por exemplo ao misturar duas cores de marca numa terceira que fica entre elas na roda.
- **srgb** para misturar com `transparent` ou condizer com ferramentas de design mais antigas que misturam em sRGB.
- **srgb-linear** para mistura de luz com base física, que se lê mais brilhante no meio.

Para o contexto sobre porque os espaços percetuais se comportam melhor, vê o [OKLCH explicado](https://gradiently.design/pt-pt/guide/oklch-explained). As versões recentes da especificação permitem omitir o espaço de cor e assumir oklab por predefinição, mas o suporte dessa forma abreviada é mais recente, por isso escreve `in oklab` explicitamente.

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

O padrão mais útil é uma escala construída a partir de uma só variável. Mistura em direção ao branco para tons claros, em direção ao preto para tons escuros. Muda a variável e cada passo atualiza-se, o que é ideal para produtos com várias marcas ou temas escolhidos pelo utilizador.

```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. Troca `--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 ficam um pouco mais cinzentos e os escuros um pouco mais lisos.

Misturar com branco e preto puros é um ponto de partida. Para tons claros mais quentes, mistura em direção a um quase branco como `#fdf6ec`; para tons escuros mais ricos, mistura em direção a um azul-marinho profundo em vez de preto. Assim a escala continua a parecer a tua marca e não uma rampa genérica. Os [tons claros, médios e escuros](https://gradiently.design/pt-pt/guide/tints-tones-shades) tratam da teoria da cor.

## Transparência com color-mix()

Antes do `color-mix()`, fazer uma versão translúcida de uma cor guardada numa variável obrigava a guardar os canais em separado. Agora misturas com `transparent`. A quantidade que mantiveres é 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 distintivo com tom e um estado de rato por cima a partir da mesma variável. Sem uma segunda cor para manter.

## Erros comuns com color-mix()

- **Omitir o espaço de cor** em código que tem de correr em navegadores antigos. A declaração inteira é descartada, não só o espaço.
- **Misturar com preto para cada tom escuro.** Os tons escuros de cores saturadas ficam baços; mistura antes em direção a uma versão profunda do tom.
- **Esperar que percentagens abaixo de 100 se mantenham opacas.** `color-mix(in oklab, red 20%, blue 30%)` fica meio transparente.
- **Usar hsl para tons claros.** A luminosidade em hsl não é percetual, por isso um amarelo e um azul na mesma mistura não se parecem nada com o mesmo passo.

## Suporte nos navegadores e alternativas

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

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

A alternativa primeiro, a melhoria depois. A cascata faz o resto.

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

## Misturar cores para gradientes

O `color-mix()` é útil dentro de gradientes, onde pode calcular uma paragem intermédia a partir de duas cores de 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á-te uma terceira paragem no caminho do tom entre as duas. O problema de fundo está tratado nos [gradientes lamacentos](https://gradiently.design/pt-pt/guide/muddy-gradients).

Se a tua cor de marca vive num Mark do Gradiently, a receita do Mark já contém uma família de cores relacionadas escolhidas para funcionarem juntas, e o Mercado permite-te pesquisar por palavras de cor como “violeta profundo” para encontrar um construído em torno do tom de que partes.

## FAQ

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

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

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

Usa oklab para tons claros, escuros e a maioria das misturas, oklch quando queres que o tom viaje e srgb para misturar com transparent.

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

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

### O color-mix() é suportado em todos os navegadores?

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

### O que acontece se as percentagens não somarem 100?

Os totais acima de 100 são reduzidos. Os totais abaixo de 100 são aumentados e o resultado fica parcialmente transparente.