color-mix(): Misturando Cores Nativamente no CSS

Misturar cores sempre exigiu JavaScript, Sass ou calcular valores RGB manualmente. A função color-mix() resolve isso nativamente: ela recebe duas cores e devolve o resultado da mistura entre elas, direto no CSS, em qualquer espaço de cor suportado.

Como funciona

A sintaxe básica informa o espaço de cor usado para a mistura e as duas cores a combinar, cada uma com um peso percentual opcional:

.caixa {
    background: color-mix(in srgb, #12A8C3 60%, white 40%);
}

Aqui o resultado é uma cor 60% próxima do azul #12A8C3 e 40% próxima do branco. Se os pesos somarem 100%, o segundo pode ser omitido — color-mix(in srgb, #12A8C3 60%, white) produz o mesmo resultado.

Clareando e escurecendo cores

Um dos usos mais comuns é gerar variações de uma cor-base sem precisar calcular um novo hexadecimal para cada tom:

:root {
    --cor-base: #12A8C3;
    --cor-clara: color-mix(in srgb, var(--cor-base) 70%, white);
    --cor-escura: color-mix(in srgb, var(--cor-base) 70%, black);
}

.botao {
    background: var(--cor-base);
}

.botao:hover {
    background: var(--cor-clara);
}

.botao:active {
    background: var(--cor-escura);
}

Como os valores são variáveis CSS, trocar --cor-base recalcula automaticamente as variações claras e escuras, sem tocar no restante do código.

Transparência sem usar rgba() ou alpha fixo

Misturar uma cor com transparent é uma forma prática de aplicar opacidade a qualquer formato de cor, incluindo currentColor:

.sombra {
    box-shadow: 0 4px 12px color-mix(in srgb, currentColor 20%, transparent);
}

Isso funciona mesmo quando currentColor muda dinamicamente (por tema, por classe ou por herança), já que a mistura é recalculada pelo navegador em tempo real — algo que um rgba() fixo não conseguiria acompanhar.

Escolhendo o espaço de cor

O primeiro argumento define o espaço de interpolação, o que muda o resultado perceptual da mistura:

.mistura-srgb {
    background: color-mix(in srgb, blue 50%, yellow);
}

.mistura-oklch {
    background: color-mix(in oklch, blue 50%, yellow);
}

srgb é o mais previsível para quem já está acostumado com hexadecimais, enquanto oklch e lab produzem misturas mais uniformes perceptualmente, evitando o tom acinzentado que às vezes aparece ao misturar cores opostas em srgb.

Quando usar

• Gerar variações de hover/active/focus a partir de uma única cor-base, sem definir cada tom manualmente.
• Aplicar opacidade a uma cor dinâmica (variável CSS ou currentColor) sem converter para rgba().
• Construir paletas de tema (claro/escuro) calculando tons intermediários em tempo real no CSS.
• Suavizar bordas, sombras e estados de hover misturando a cor do componente com o fundo ao redor.

Cuidados

O resultado de color-mix() é sempre calculado em CSS puro — ele não substitui pré-processamento quando é preciso gerar uma paleta inteira em tempo de build. Além disso, misturar em espaços diferentes (srgb vs oklch) pode dar resultados visualmente bem diferentes para os mesmos percentuais, então vale testar o espaço de cor antes de fixar a mistura em produção.

Compatibilidade

O color-mix() é Baseline desde 2023, com suporte em Chrome e Edge a partir da versão 111, Firefox a partir da 113 e Safari a partir da 16.2, cobrindo a grande maioria dos navegadores em uso atualmente.

caniuse

Conclusão

O color-mix() elimina boa parte dos cálculos manuais e das dependências de pré-processador só para gerar variações de cor. É uma função simples, mas que resolve um problema do dia a dia de qualquer pessoa que escreve CSS.