Por que misturas RGB ficam turvas no meio?

RGB faz média dos valores de canal direto. De vermelho saturado pra azul saturado passa por ponto médio cinza-púrpura de baixa saturação porque o canal verde fica em 0. Tente HSL ou LAB pra manter mais saturação no meio.

LAB é perceptualmente uniforme — passos numéricos iguais parecem passos perceptuais iguais. Melhor pra design de gradiente quando suavidade importa. CSS `color-mix(in lab, …)` faz o mesmo em navegadores modernos.

O que acontece com matiz no HSL quando as cores são opostas?

HSL pega o arco mais curto da roda de cores. Misturar vermelho (0°) e ciano (180°) é ambíguo — a ferramenta escolhe uma direção; se o resultado surpreender, tente LAB.

Por que meu 50% não está exatamente no meio visualmente?

Só LAB dá resultado perceptualmente no meio. Pontos médios RGB e HSL são matematicamente no meio, o que costuma ser perceptualmente mais próximo da mais escura das duas extremidades.

Misturador de Cores

Escolha duas cores e uma proporção (0–100%). A ferramenta interpola entre elas no espaço escolhido — RGB pra matemática simples, HSL pra misturas que preservam o matiz, ou CIELAB pra transições perceptualmente uniformes — e mostra o resultado mais uma faixa de 11 passos. Útil pra escolher cores de acento intermediárias, gerar paradas de cor pra gradientes ou entender por que duas cores parecem turvas no meio (geralmente porque seu ponto médio RGB não está perceptualmente no meio).

—

Cor A

Cor B

Mistura: 50%

Resultado

#8033B3

Mistura 11 passos

10%

20%

30%

40%

50%

60%

70%

80%

90%

100%

LAB dá o gradiente mais perceptualmente uniforme. RGB e HSL são rápidos mas podem parecer desiguais no meio.

Como usar

Defina cor A e cor B (hex ou seletor).
Escolha mistura RGB, HSL ou LAB.
Deslize o slider ou leia a faixa de 11 passos.

Perguntas frequentes

Por que misturas RGB ficam turvas no meio?: RGB faz média dos valores de canal direto. De vermelho saturado pra azul saturado passa por ponto médio cinza-púrpura de baixa saturação porque o canal verde fica em 0. Tente HSL ou LAB pra manter mais saturação no meio.
Quando usar LAB?: LAB é perceptualmente uniforme — passos numéricos iguais parecem passos perceptuais iguais. Melhor pra design de gradiente quando suavidade importa. CSS `color-mix(in lab, …)` faz o mesmo em navegadores modernos.
O que acontece com matiz no HSL quando as cores são opostas?: HSL pega o arco mais curto da roda de cores. Misturar vermelho (0°) e ciano (180°) é ambíguo — a ferramenta escolhe uma direção; se o resultado surpreender, tente LAB.
Por que meu 50% não está exatamente no meio visualmente?: Só LAB dá resultado perceptualmente no meio. Pontos médios RGB e HSL são matematicamente no meio, o que costuma ser perceptualmente mais próximo da mais escura das duas extremidades.

Ferramentas relacionadas

Pré-visualização de CSS color-mix()

Compare como a função moderna CSS color-mix() mistura duas cores em diferentes espaços de interpolação (srgb, hsl, oklch, lab, lch, hwb, oklab, srgb-linear) — amostras ao vivo, hex computado, faixa de gradiente completa por espaço e CSS copiável.

Cor 0 0

Comparador de Brilho de Cor (HSL vs Lab L* vs WCAG vs HSP)

Compare sete métricas de brilho diferentes — Luminosidade HSL, Valor HSV, Luminância Relativa WCAG (LRV), L* CIE Lab (claridade perceptual), Luma Rec. 709, Brilho Percebido HSP e média ingênua (R+G+B)/3 — para uma ou duas cores lado a lado, com deltas mostrando por que uma cor 'mais clara' pode parecer mais escura.

Cor 0 0

Conversor de cor CMYK ↔ RGB (espaço de cor de impressão)

Converte entre cores RGB/hex de tela e porcentagens CMYK para impressão, com estratégias de geração de preto Simples, GCR (Substituição de componente cinza) e UCR (Remoção de cor sob), pré-visualização de separação de canais e leitura de cobertura total de tinta.

Cor 0 0

Gerador de Gradientes CSS

Crie gradientes CSS lineares ou radiais com várias paradas de cor e copie o código.

Cor 0 0

Interpolação de Cor / Passos de Gradiente

Escolha duas cores hex, obtenha N passos intermediários discretos — em sRGB, linear RGB, OKLab ou HSL — com easing opcional.

Cor 0 0

Gerador de Conic Gradient

Construtor visual para CSS `conic-gradient()` — rotacionar ângulo, posição do centro, paradas de cor, pré-visualização de forma. Útil para gráficos de pizza, gráficos de anel, padrões xadrez, rodas de cor.

Cor 0 0