Misturador de Cores

Misture duas cores com um controle de proporção e veja a escala completa de 11 passos entre elas, no seu navegador.

Como usar

  1. Escolha as duas cores nos seletores ou digite códigos hexadecimais como #ffcc00 e #0044cc.
  2. Escolha o modo de mistura — RGB para luz, como as telas misturam, ou Tinta para a aproximação subtrativa — e arraste o controle para definir a proporção.
  3. Confira a cor resultante: seus valores hex e RGB aparecem abaixo, e o gradiente de 11 passos mostra cada tom entre as duas cores.

Sobre esta ferramenta

Duas cores podem ser misturadas de dois jeitos completamente diferentes, e esta ferramenta mostra os dois. As telas misturam luz: elas somam vermelho, verde e azul, e é por isso que luz vermelha mais luz verde dá amarelo e por isso que toda cor desta página é, no fim, uma tripla RGB. A tinta mistura ao contrário: cada pigmento subtrai comprimentos de onda da luz branca que o atinge, e é por isso que a resposta escolar para "amarelo mais azul" é verde, e por isso que as mesmas duas cores misturadas como luz dão um cinza neutro. Escolher o modelo mental errado é a razão mais comum de uma cor misturada sair barrenta ou pálida demais.

O modo RGB faz exatamente o que diz: interpola cada um dos três canais linearmente entre as duas cores, no mesmo espaço sRGB que seu CSS e suas ferramentas de design usam, então 50% entre #ff0000 e #0000ff é #800080. O modo Tinta primeiro converte as duas cores para o espaço RYB da roda de cores dos artistas, interpola ali e converte o resultado de volta para RGB — é essa conversão que faz amarelo e azul se encontrarem no verde. Saiba o que esse modo é e o que não é: a mistura real de pigmentos é governada por absorção e espalhamento (o modelo de Kubelka-Munk) e depende da opacidade, do tamanho das partículas e do aglutinante, então nenhuma fórmula linear reproduz isso. O modo Tinta é um modelo fiel da roda de cores, não uma simulação de tinta de verdade.

A escala de 11 passos abaixo do resultado costuma ser mais útil que a cor misturada isolada: ela entrega a rampa completa de uma cor à outra em incrementos de 10%, pronta para virar paradas de gradiente, estados intermediários entre duas cores de marca ou os degraus de uma paleta sequencial de gráfico. Clique em qualquer amostra para copiar o hexadecimal. Tudo — as conversões, a interpolação e a escala inteira — é calculado 100% no seu navegador com JavaScript puro; nenhuma cor que você digita é enviada para lugar nenhum.

Perguntas frequentes

Qual a diferença entre os modos RGB e Tinta?

O RGB mistura luz de forma aditiva, como uma tela faz, então interpola cada canal diretamente; o Tinta aproxima a mistura subtrativa pela roda RYB dos artistas. O teste clássico é amarelo mais azul: no RGB dá um cinza neutro, no Tinta dá verde.

O modo Tinta corresponde ao que acontece na minha paleta?

Mais ou menos, mas não exatamente. Pigmentos reais se misturam por absorção e espalhamento de luz, e o resultado depende da opacidade, da carga de pigmento e do aglutinante — nenhuma fórmula linear reproduz isso. Trate o modo Tinta como a resposta da roda de cores, útil para decisões de design, e não como um simulador de tinta.

O que o controle de proporção faz de fato?

Ele define quanto de cada cor entra na mistura: em 30%, o resultado é 70% da cor A e 30% da cor B. Em 0% e 100% você recebe as duas cores originais intactas.

Para que serve a escala de 11 passos?

É a rampa completa entre as duas cores em passos de 10% — prática para paradas de gradiente, estados de hover e ativo, paletas de gráficos ou qualquer lugar em que você precise de cores intermediárias consistentes. Clicar num passo copia o código hexadecimal.

Minhas cores saem do meu navegador?

Não. A mistura roda inteiramente em JavaScript no seu dispositivo — os códigos hexadecimais que você digita nunca são enviados, registrados ou armazenados em nenhum servidor.

Ferramentas relacionadas

Links longos? Encurte de graça

O Vai.la transforma qualquer URL em um link curto com estatísticas de cliques, QR Code e seu próprio biolink.

O Vai.la não se responsabiliza pelo uso das ferramentas nem por decisões tomadas com base nos seus resultados.