Pré-visualização de CSS color-mix()
O CSS moderno permite misturar duas cores com `color-mix(in <space>, A <p>, B)`, e o espaço de interpolação escolhido muda o resultado drasticamente. Vermelho misturado com azul em `srgb` dá um roxo-cinza turvo; a mesma mistura em `oklch` produz uma magenta vibrante; em `hsl` percorre o ciano porque o matiz interpola pelo caminho curto do círculo. Esta ferramenta renderiza a mesma mistura nos oito espaços mais usados lado a lado — `srgb`, `srgb-linear`, `hsl`, `hwb`, `lab`, `lch`, `oklab`, `oklch` — usando o `color-mix()` nativo do navegador, então o que você vê é o que sua folha de estilo produzirá. Cada cartão mostra uma amostra grande na porcentagem atual, o hex sRGB resolvido (calculado desenhando a cor em um canvas 1×1 e lendo o pixel) e uma faixa de 11 passos com o caminho completo de A a B. Ajuste o controle deslizante e veja os oito caminhos animarem. Clique em qualquer cartão para copiar a declaração CSS correspondente.
Sobre os espaços de interpolação
color-mix() interpola linearmente as duas cores no espaço indicado. sRGB passa por cinzas dessaturados. srgb-linear corresponde à adição física de luz (composição fotográfica). HSL/HWB/LCH/OKLCH interpolam o matiz ao redor de um círculo — o arco mais curto por padrão. OKLab/OKLCH (Björn Ottosson, 2020) são perceptualmente uniformes — passos numéricos iguais parecem passos visuais iguais. O hex sob cada amostra é lido de um canvas 1×1 depois que o navegador resolve a mistura, então coincide com getComputedStyle().
Como usar
- Escolha a cor A e a cor B com os seletores ou cole um hex.
- Arraste o controle de porcentagem — é a quantidade de A na mistura (30% significa 30% A e 70% B).
- Compare os oito cartões: a amostra é a cor resolvida, a faixa mostra o degradê A→B naquele espaço.
- Clique no ícone de copiar de qualquer cartão para obter a declaração `background: color-mix(in <space>, ...);`.
- 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
Seletor de Cor OKLCH
Escolha cores no espaço OKLCH perceptualmente uniforme (luminosidade · croma · matiz) — e veja se cada escolha cabe dentro do gamut de tela sRGB.
Simulador de modos de mesclagem CSS
Aplique os 16 modos de mesclagem do W3C (multiply, screen, overlay, soft-light, hue, color, luminosity…) a duas cores e obtenha o hex resultante e um snippet CSS mix-blend-mode pronto para copiar.
Misturador de Cores
Interpole entre duas cores em RGB, HSL ou CIELAB. Veja uma faixa de gradiente com passos intermediários.
Conversor de Formatos de Cor
Converta qualquer cor entre HEX, RGB, HSL, HSV, OKLCH e uma variável CSS.
Interpolação de Cor / Passos de Gradiente
Escolha duas cores hex, obtenha N passos intermediários discretos — em sRGB, linear RGB, OKLab ou HSL — com easing opcional.
Conversor de comprimento de onda para cor (nm → sRGB)
Converte um comprimento de onda em nanômetros (380–780 nm — o espectro visível) em uma cor sRGB aproximada, com barra de gradiente arco-íris clicável e linhas de absorção de Fraunhofer do espectro solar real como referência.