Pré-visualização de CSS color-mix()

Como usar

1. Escolha a cor A e a cor B com os seletores ou cole um hex.
2. Arraste o controle de porcentagem — é a quantidade de A na mistura (30% significa 30% A e 70% B).
3. Compare os oito cartões: a amostra é a cor resolvida, a faixa mostra o degradê A→B naquele espaço.
4. Clique no ícone de copiar de qualquer cartão para obter a declaração `background: color-mix(in <space>, ...);`.
5. Tente os presets — vermelho↔azul e amarelo↔azul são os casos clássicos de 'por que o srgb fica feio'.

Perguntas frequentes

Por que o resultado fica tão diferente em cada espaço?

A interpolação linear (o que `color-mix()` faz) é uma linha reta pelo sistema de coordenadas que você escolher. Em sRGB essa linha passa por pontos médios de cinza dessaturado porque o cubo sRGB tem cinza na diagonal principal. Em OKLCH a linha mantém a luminosidade percebida constante e gira pelo matiz, mantendo a viveza. Em HSL a linha pega o caminho mais curto pelo círculo de matiz, podendo passar por cores que não estão entre A e B. Nenhum está 'errado' — são geometrias diferentes.

Qual espaço devo usar?

Para a maioria do trabalho de UI, `oklch` ou `oklab` dão os melhores resultados perceptuais — gradientes mantêm brilho uniforme, misturas continuam vivas, sem pontos médios turvos. `srgb-linear` é correto para mistura física de luz (composição fotográfica). `srgb` corresponde ao que ferramentas antigas e o CSS pré-2023 faziam. `hsl` serve para paletas baseadas em matiz só quando A e B compartilham saturação/luminosidade. Evite `srgb` puro para pares de cores vivas a menos que queira especificamente o visual abafado.

Quão preciso é o hex exibido?

É exatamente o que o navegador calcula. A expressão de cor é definida como `fillStyle` do canvas, um pixel 1×1 é renderizado, então `getImageData()` lê os bytes sRGB reais. Assim, o hex que você vê é o mesmo que `getComputedStyle()` resolveria para essa mistura — dentro do arredondamento (±1 por canal por quantização de canvas de 8 bits).

E hue-shortest vs hue-longest?

CSS suporta modificadores `longer hue` / `shorter hue` / `increasing hue` / `decreasing hue` para espaços baseados em matiz (hsl, hwb, lch, oklch). Esta ferramenta usa o padrão (shorter hue) para manter os cartões limpos. Se precisar de interpolação de matiz mais longa, adicione o modificador você mesmo: `color-mix(in oklch longer hue, A 50%, B)` — mesmas cores, direção oposta do círculo.

Suporte de navegador?

color-mix() está em Chrome/Edge 111+ (mar 2023), Safari 16.2+ (dez 2022) e Firefox 113+ (mai 2023). Todos os principais navegadores de 2023 em diante suportam todos os espaços listados aqui. Se você vir o aviso de não suportado, seu navegador é mais antigo — o CSS ainda é analisado mas não produzirá a cor certa.

Ferramentas relacionadas