TL
Tool Lab
💰Donate
💰Donate

Misturador de Cores

Misture duas cores e explore o gradiente completo entre elas. Ajuste a proporção para obter a mistura exata.

Cor 1
Cor 2
Proporção de mistura — 50% Cor 1 : 50% Cor 2
Cor misturada
HEX: #A79C98
RGB: rgb(167, 156, 152)
HSL: hsl(16, 8%, 63%)
Escala de gradiente (clique para copiar)
#FF6B6B
#E27B7A
#C48C89
#A79C98
#89ACA6
#6CBDB5
#4ECDC4

Sobre esta ferramenta

O Misturador de Cores combina duas cores hexadecimais no espaço RGB, produzindo uma mistura suave em qualquer proporção entre 0% e 100%. A escala de gradiente mostra 7 etapas uniformes entre as duas cores.

A mistura RGB é a mesma operação que um navegador realiza ao compor cores — matematicamente exata e previsível. A cor misturada a 50% é o ponto médio real entre ambas as cores no espaço RGB.

Como usar

  1. Escolha duas cores usando os seletores de cor ou digite códigos hex diretamente.
  2. Use os botões de predefinição para experimentar combinações clássicas de cores.
  3. Arraste o controle deslizante de proporção para ajustar a mistura. 0% dá a Cor 1; 100% dá a Cor 2.
  4. Clique em qualquer amostra de gradiente ou no botão Copiar HEX para copiar uma cor.

Casos de uso

Designers de UI misturam a cor principal de uma marca com branco ou preto para gerar cores de estado acessíveis. Designers de movimento escolhem cores intermediárias para animações de quadros-chave. Desenvolvedores frontend geram pontos de gradiente sem um editor gráfico.

Perguntas frequentes

  • É igual ao gradiente CSS?Sim. CSS linear-gradient também mistura em sRGB por padrão. As etapas mostradas correspondem exatamente aos pontos intermediários que um gradiente CSS passa.
  • Por que misturar vermelho e azul não dá roxo?Em RGB, vermelho (#ff0000) e azul (#0000ff) a 50% dá #7f007f (magenta escuro). Um roxo vibrante requer mistura de vermelho com azul-violeta como #8000ff.
  • Posso obter mais etapas de gradiente?A escala sempre mostra 7 etapas. Use o controle de proporção para inspecionar qualquer ponto intermediário específico.
  • Suporta alfa/transparência?Não, esta ferramenta funciona apenas com cores hex sólidas.