Misturador de cores

Misture cores visualmente com copos medidores. Escolha as cores, ajuste as quantidades e veja o resultado em RGB, HSL e HEX.

Área de mistura

Copo 1

5

Copo 2

5

Resultado da mistura

Proporções informadas

50%

Composição RGB

Vermelho: 142 (35.9%)

Verde: 114 (28.8%)

Azul: 140 (35.4%)

Cor misturada

Detalhes da cor

HEX

#8E728C

RGB

rgb(142, 114, 140)

HSL

hsl(304, 11%, 50%)

Misturador de cores – Como funciona

Por que a mistura de cores funciona

Existem duas formas principais de misturar cores:

A mistura aditiva é usada por telas e sistemas baseados em luz. Quando luzes coloridas se sobrepõem, a luz se soma. Vermelho + Verde = Amarelo, Vermelho + Azul = Magenta, Verde + Azul = Ciano. Ao combinar as três cores com intensidade máxima, o resultado é branco.

A mistura subtrativa é usada por tintas, pigmentos e materiais físicos. Os materiais absorvem certos comprimentos de onda e refletem o restante. As cores primárias subtrativas são Ciano, Magenta e Amarelo (CMY). Quanto mais são misturadas, mais o resultado se aproxima do preto.

Esta ferramenta utiliza o modelo aditivo RGB, padrão para telas digitais e design web.

O modelo de cores RGB

O RGB define uma cor por meio de três canais:

Vermelho (R): 0–255
Verde (G): 0–255
Azul (B): 0–255

Cada pixel de uma tela contém subpixels vermelho, verde e azul. Ao variar a intensidade de cada canal, uma tela pode exibir mais de 16,7 milhões de cores ( $256^3 = 16{,}777{,}216$ ).

Formatos de cor mais comuns

Formato	Exemplo	Descrição
HEX	#FF6B35	Formato hexadecimal de 6 dígitos, amplamente usado em CSS
RGB	rgb(255, 107, 53)	Valores de vermelho, verde e azul em notação decimal
HSL	hsl(16, 100%, 60%)	Matiz, saturação e luminosidade — mais intuitivo para ajustes visuais

Como o misturador calcula o resultado

O misturador calcula o resultado obtendo a média ponderada de cada canal RGB. Para $N$ cores de entrada com quantidades $a_1, a_2, \ldots, a_N$ e valores RGB $(r_i, g_i, b_i)$ , o resultado é:

R_{\text{mix}} = \frac{\sum_{i=1}^{N} a_i \cdot r_i}{\sum_{i=1}^{N} a_i}

G_{\text{mix}} = \frac{\sum_{i=1}^{N} a_i \cdot g_i}{\sum_{i=1}^{N} a_i}

B_{\text{mix}} = \frac{\sum_{i=1}^{N} a_i \cdot b_i}{\sum_{i=1}^{N} a_i}

Em resumo, cores com nível mais alto têm maior influência sobre o resultado final.

Por exemplo, misturando 3 partes de vermelho (#FF0000) com 1 parte de azul (#0000FF):

R = \frac{3 \times 255 + 1 \times 0}{4} = 191

G = \frac{3 \times 0 + 1 \times 0}{4} = 0

B = \frac{3 \times 0 + 1 \times 255}{4} = 64

A cor resultante é aproximadamente #BF0040, um vermelho arroxeado profundo.

Aplicações práticas

Web design e UI

Use o misturador para montar paletas, testar sobreposições transparentes e criar cores de destaque a partir de uma cor base.

Educação

É uma forma simples de entender como a luz, a percepção humana de cores e a matemática das cores se relacionam.

Arte digital

Ajuda artistas a prever como as cores se combinarão na tela em ilustração, design e edição de imagens.

Dicas para misturar cores melhor

Comece pelas cores primárias — Vermelho, verde e azul são a base da mistura RGB.
Ajuste os níveis — Quanto maior o nível de uma cor, maior será sua influência no resultado final.
Compare os formatos de saída — Use HEX, RGB ou HSL conforme o contexto — seja em CSS, em ferramentas de design ou no código.
Valores RGB iguais resultam em cinza — Se os três canais tiverem o mesmo valor, o resultado será um cinza neutro.

Perguntas frequentes

Qual é a diferença entre mistura aditiva e subtrativa? A mistura aditiva usa luz e fica mais brilhante ao acrescentar cores, terminando em branco. A mistura subtrativa usa pigmentos e fica mais escura ao acrescentar cores, aproximando-se do preto.

Por que o resultado é diferente de misturar tintas? Porque esta ferramenta usa o modelo de luz RGB, não pigmentos. Na tela, vermelho + azul = magenta. Com tintas, os pigmentos absorvem a luz de forma diferente, produzindo um resultado visual distinto.

Posso usar os códigos de cor resultantes diretamente em CSS? Sim. Os valores HEX, RGB e HSL gerados podem ser usados diretamente em CSS e na maioria das ferramentas de design.

O que representa o "nível" em cada copo? Indica a quantidade relativa daquela cor na mistura. Um copo no nível 8 contribui duas vezes mais do que o mesmo copo em nível 4.