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

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

/* 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 é 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 explica a mesma escolha para gradientes, e aí o efeito vê-se mais facilmente.

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

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

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

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

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

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.

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.