Saltar para o conteúdo

Misturador de cores: misture duas cores e descubra o resultado

Escolha duas cores, ajuste a proporção e obtenha na hora o tom resultante em HEX, RGB e OKLCH, com sua escala intermediária e o código CSS pronto para copiar.

Resultado#598FE550%50%

Cores

Proporção da cor B

50%
A 50% · B 50%

Espaço de mistura

Passos intermediários
10
Balance da paleta
background: color-mix(in srgb, #2C71DE 50%, #85ADEC);
/* = #598FE5 */

Conversao de cor

Misturas populares

Que cor dá misturar vermelho e azul? Carregue um par clássico e ajuste-o como quiser.

Para que serve misturar duas cores

O misturador de cores combina duas cores na proporção que você escolher e calcula o tom exato resultante. É diferente de explorar harmonias a partir de uma única cor base, que é o que faz o círculo cromático: aqui você parte de duas cores já definidas e procura o ponto intermediário entre elas.

É especialmente útil para encontrar um tom de transição entre duas cores de marca, montar uma escala de tons intermediários para estados de interface (hover, fundos, bordas) ou gerar o CSS da mistura sem calcular porcentagens à mão: a ferramenta dá tanto o color-mix() nativo como o degradê linear-gradient().

Como misturar duas cores em três passos

  1. Escolha as duas cores

    Clique em Cor A ou Cor B e ajuste-a com o matiz, o brilho, o conta-gotas ou digitando o código. O botão Trocar inverte a ordem.

  2. Ajuste a proporção

    Arraste o controle deslizante ou use os atalhos de 25, 50 e 75%. Com 0% você obtém a Cor A pura e com 100%, a Cor B.

  3. Copie o resultado

    Copie a cor em HEX com um clique, ou o código color-mix(), o degradê ou as classes do Tailwind. Abaixo você tem a mesma cor em RGB, HSL, CMYK, LAB e outros formatos.

Por que azul e amarelo não dão verde na tela?

Na escola aprendemos que azul e amarelo dão verde. Com tinta é verdade: os pigmentos absorvem luz, e ao combiná-los só é refletido o que nenhum dos dois absorve, neste caso o verde. É uma mistura subtrativa.

Uma tela não mistura pigmentos, mas luz. Ao fazer a média dos canais RGB do azul e do amarelo, eles se compensam e o resultado é um cinza. Se quiser o comportamento da tinta, adicione você mesmo o verde como cor intermediária, ou compare o resultado no modo perceptual (OKLab), que preserva melhor a luminosidade.

RGB ou perceptual: qual espaço de mistura escolher

O mesmo par de cores pode dar misturas diferentes conforme o espaço em que se calcula. A ferramenta deixa você escolher entre os dois mais usados, os mesmos que a função CSS color-mix() aceita.

50 % = #800080

RGB (sRGB)

Faz a média dos canais vermelho, verde e azul. É o cálculo clássico e o usado pela maioria dos editores. Entre cores saturadas e opostas, o ponto médio costuma sair mais escuro e apagado.

50 % = #8C53A2

Perceptual (OKLab)

Interpola num espaço desenhado segundo a forma como percebemos a cor. Os passos avançam de forma mais uniforme e os tons médios ficam mais luminosos. É a opção recomendada para escalas e degradês de interface.

A diferença entre misturar e gerar harmonias

Misturar duas cores

Interpola diretamente entre duas cores concretas que você escolhe. O resultado depende das cores de partida e da proporção: ideal quando você já tem duas cores fixas e precisa do ponto intermediário.

Gerar harmonias

É calculado matematicamente a partir da posição de uma única cor na roda cromática (análoga, complementar, triádica…). Serve para construir uma paleta completa, não um tom intermediário entre duas cores dadas.

Perguntas frequentes

Cada componente da cor é interpolado segundo a proporção escolhida. No modo RGB, faz-se a média dos canais vermelho, verde e azul; no modo perceptual (OKLab), interpolam-se a luminosidade e os dois eixos de cor do OKLab, o que dá transições mais uniformes.

Com tinta, verde. Na tela, misturando em RGB a 50%, um cinza neutro (#808080 com azul e amarelo puros), porque a luz se mistura de forma aditiva e os canais se compensam. Se precisar de um verde, adicione-o como cor intermediária.

Um roxo. Com vermelho e azul puros a 50% em RGB você obtém #800080; no modo perceptual, o roxo sai mais claro. Quanto mais peso der ao azul, mais fria será o resultado.

É uma função nativa do CSS que mistura duas cores diretamente no navegador, por exemplo color-mix(in srgb, #E53935 50%, #1E88E5). Funciona em todos os navegadores modernos. A ferramenta gera esse código e também a cor HEX equivalente, caso você precise de um valor fixo.

Sim. A aba Degradê gera um linear-gradient() entre a Cor A, a mistura e a Cor B. Se precisar de mais paradas ou degradês radiais e cônicos, use o gerador de degradês.

O círculo cromático calcula cores relacionadas a partir de uma única cor base, segundo as regras da teoria das cores. O misturador combina duas cores concretas que você escolhe e calcula o ponto intermediário entre elas, não uma paleta completa.

Os passos definem quantos tons a escala tem entre A e B, de 3 a 12. O balanço desloca esses tons para uma das duas cores, útil se você quiser mais nuances perto da Cor A ou da Cor B. Clique em qualquer tom da escala para copiá-lo.

Sim. Abaixo da ferramenta você tem a cor misturada em RGB, HSL, HSB, CMYK, LAB, LCH e mais formatos, e o botão Exportar cores baixa a escala completa para Tailwind, Figma ou CSS.

Mais ferramentas