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

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()

/* 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); }

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 explica a mesma escolha para gradientes, e o efeito é mais fácil de ver lá.

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

: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);
}

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

.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%);
}

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

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

Um tema completo construído sobre esses padrões, com modos claro e escuro, está em variáveis CSS para temas.

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.

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.