O que é Misturador de cores?

Misture duas cores com um controle de proporção e veja o resultado em tempo real. Gera valores HEX, RGB e HSL que você pode copiar direto para seu código ou ferramenta de design.

Escolha duas cores, selecione um modo de mistura — RGB, RYB, LAB, LCH, HSL ou OKLCH — e deslize a proporção de 0% a 100%. RGB faz a média direto no espaço da tela, é o mais rápido mas pode dar pontos médios sem graça; RYB mistura como tinta de verdade, então azul e amarelo dão verde e vermelho e amarelo dão laranja; LAB e LCH misturam em espaço perceptual, gerando gradientes mais suaves entre matizes; OKLCH é o modelo perceptual mais recente, alinhado com a especificação CSS color-mix, e costuma entregar o ponto médio com aparência mais natural. As saídas vêm em HEX, RGB, HSL, CMYK e no nome de cor mais próximo, além de uma leitura de contraste WCAG sobre branco e preto e um gradiente linear CSS para copiar. Os botões de 25, 50 e 75 por cento levam direto aos pontos de mistura mais comuns sem arrastar o controle.

Como usar

1. Passo 1 — Selecione a primeira cor usando o seletor de cores ou insira o seu valor HEX.
2. Passo 2 — Selecione a segunda cor e ajuste o controle deslizante de proporção para controlar a mistura (0% = primeira cor pura, 100% = segunda cor pura).
3. Passo 3 — Visualize o resultado da mistura com os seus códigos de cor e copie os valores de que precisa.

Quando usar

• Criar estados de hover e disabled misturando a cor da marca com branco ou cinza.
• Gerar paradas intermediárias para um gradiente CSS que não fica turvo no meio.
• Obter um destaque mais suave misturando duas cores da marca em proporção baixa para avisos.

Resultado

Um designer mistura o azul da marca (#2196F3) com branco (#FFFFFF) a 30% para criar um tom suave (#A1C9F8) para estados de hover num kit de interface.

Perguntas frequentes

Qual modo de mistura uso na maioria das vezes?

Se seu pipeline suportar, use OKLCH: é o mais uniforme perceptualmente e bate com a especificação moderna CSS color-mix. LAB é a segunda melhor escolha e tem suporte amplo em ferramentas de design. RGB resolve quando as cores têm luminância parecida; LCH preserva melhor o croma; HSL é útil quando você quer rotação de matiz, não interpolação suave.

Por que o ponto médio em RGB às vezes fica cinza ou sujo?

RGB faz média numérica, não perceptual. Cores complementares como azul e laranja se cancelam nos canais R, G e B e o resultado vira um cinza dessaturado. Trocando para LAB ou LCH, o meio se mantém saturado. Para um resultado igual ao de misturar tinta física, use o modo RYB: ele combina azul e amarelo em verde, e não em cinza.

Qual a diferença para o CSS `color-mix()`?

color-mix() já roda em navegadores modernos com srgb, lab, oklab, lch ou oklch. Esta ferramenta devolve HEX que cola em folhas de estilo antigas e ainda traz um slider visual para ajustar a proporção sem precisar adivinhar a porcentagem.

Dá para misturar mais de duas cores?

Num único passo não, mas dá para encadear: misture A e B para obter C, depois misture C com D. Para um gradiente de três cores mais suave, misture A→B a 50%, B→C a 50% e use esses dois pontos médios como paradas em volta do B original.

O que significam proporção 0% e 100%?

0% entrega a Cor 1 pura, 100% entrega a Cor 2 pura e 50% é o meio. O slider anda de 1% em 1%, então dá para regular um tint ou shade com precisão — em estados de UI uma mistura de 10% parece diferente de 15%.

Ferramentas relacionadas