color-mix() no CSS

Mistura declarativa na folha de estilos, sem preprocessador obrigatório.

GuiasGlossário › color-mix

GlossárioCSS modernoVer todos os conceitos

Em uma frase

color-mix() é uma função de CSS que produz uma nova cor interpolando duas cores de entrada, com proporção configurável e, em navegadores alinhados ao módulo Color 4, escolha de espaço de cor para a interpolação (por exemplo in srgb).

Exemplo mental

Algo como misturar 70% de azul e 30% de branco para obter um azul claro sem criar um terceiro token manualmente. Em design systems, isso reduz variáveis duplicadas: você deriva tons a partir de primária + superfície.

Relação com este site

A página Mistura de cores faz operação parecida no navegador com dois hex e um controle deslizante: útil para prototipar antes de levar a fórmula para color-mix() ou para Sass. Opacidade cobre outro tipo de "mistura", com canal alpha.

Compatibilidade

Nem todo usuário está em navegador com suporte completo; mantenha fallback em hex ou variável CSS fixa para bases críticas. Consulte caniuse em paralelo a este glossário.