CodeKitHubO que é esta ferramenta?
Um misturador de cores interpola linearmente os canais vermelho, verde e azul de duas cores em uma proporção escolhida, a mesma matemática usada internamente por um degradê. Em 0% o resultado é a Cor A, em 100% é a Cor B, e em 50% é o ponto médio aritmético de cada canal RGB.
Isso é diferente de misturar tinta física (que é subtrativa e depende do pigmento), e também não é o mesmo que tirar uma média no espaço HSL — a interpolação linear em RGB é o que os degradês CSS, as ferramentas de design e a maioria dos utilitários de "cor entre duas cores" usam, então o resultado corresponde ao que você veria em um degradê de navegador entre essas mesmas duas cores.
Por que usar?
- Encontre uma cor de hover ou estado ativo que fique naturalmente entre sua cor base e um destaque, em vez de adivinhar um ajuste aleatório.
- Veja o código HEX exato em qualquer proporção, não apenas por estimativa em uma captura de tela do degradê.
- A rampa de 11 etapas gera com um clique uma paleta completa de uma cor à outra, útil para visualização de dados ou um degradê com vários pontos.
- Clique em qualquer etapa para copiar seu código HEX instantaneamente.
- Grátis, instantâneo e totalmente local — sem upload, sem conta.
Como usar
- Escolha a Cor A e a Cor B usando os seletores de cor ou digitando um código HEX.
- Arraste o controle deslizante de proporção para definir quanto da Cor B misturar.
- Leia os valores HEX e RGB resultantes acima da amostra.
- Clique em qualquer amostra da rampa de 11 etapas abaixo para copiar seu código HEX.
Exemplo
Entrada
Cor A #3B82F6 (azul), Cor B #F59E0B (âmbar), proporção 50%Resultado
#9B9E7D — rgb(155, 158, 125)Exatamente em 50%, cada canal RGB é a média aritmética dos canais das duas cores de entrada.
Perguntas frequentes
Por que isso não corresponde ao que eu obteria misturando tinta de verdade?
A mistura de tinta é subtrativa (os pigmentos absorvem luz) e depende dos pigmentos específicos envolvidos — misturar tinta azul e amarela dá verde, por exemplo. Esta ferramenta mistura luz (canais RGB) de forma aditiva/linear, que é como telas, degradês CSS e a maioria das ferramentas de design digital combinam cores. Os dois sistemas produzem resultados genuinamente diferentes por design, não por erro.
Isso é o mesmo que um linear-gradient de CSS entre as duas cores?
Sim — um linear-gradient(corA, corB) de CSS interpola os canais RGB da mesma forma que esta ferramenta, então a cor que você veria no ponto médio desse degradê corresponde ao resultado de 50% aqui.
Por que a cor misturada às vezes parece turva ou acinzentada?
Misturar dois tons saturados mas muito diferentes (como azul e laranja, quase complementares) no espaço RGB geralmente produz um ponto médio de baixa saturação, acinzentado ou amarronzado — essa é uma propriedade real da interpolação RGB, não um bug. Se quiser uma mistura mais vibrante, tente cores mais próximas no círculo cromático, ou misture no espaço HSL ajustando o matiz enquanto mantém a saturação alta (algo que este misturador RGB direto não faz).
Posso misturar mais de duas cores de uma vez?
Não em uma única etapa — a ferramenta mistura exatamente duas cores. Para combinar três, misture as duas primeiras na proporção desejada, copie o resultado e cole-o como a nova Cor A contra sua terceira cor. Fazer isso em etapas também dá controle sobre o peso de cada uma, algo que uma média direta entre três não permitiria.
Devo usar esta ferramenta ou o Gerador de Tons de Cor?
Se você precisa de uma cor que fique entre duas cores diferentes — digamos, um tom de transição entre o azul da sua marca e um destaque âmbar — use este misturador. Se precisar de variantes mais claras e mais escuras de uma única cor (estados de hover, fundos, uma rampa estilo Tailwind de 50 a 900), use o Gerador de Tons de Cor: ele mantém o matiz e a saturação fixos e varia apenas a luminosidade, então cada resultado permanece claramente na mesma família de cor.
Quais formatos de cor posso digitar nos campos de entrada?
Os campos de texto aceitam códigos HEX de 6 dígitos, com ou sem o # inicial (por exemplo, 3B82F6 ou #3B82F6). O HEX abreviado de 3 dígitos, a notação rgb() e os nomes de cores CSS não são interpretados ali — mas você pode escolher qualquer cor visualmente com o seletor de cor nativo ao lado de cada campo, e o campo HEX é atualizado para corresponder.