Misturador de Cores

O que significa misturar cores?

Misturar duas cores combina-as ao longo de uma linha reta em algum espaço de cor, produzindo todas as tonalidades intermediárias entre elas. A escolha do espaço importa: misturar em sRGB cru (os valores do código hex) parece intuitivo mas produz pontos médios opacos e acinzentados — porque sRGB é codificado em gama, não linear. Misturar em RGB de luz linear — que é o que esta ferramenta faz por padrão — gera pontos médios mais brilhantes e mais precisos, que combinam com a forma como a luz realmente se soma no mundo físico. A diferença é mais visível ao misturar uma cor saturada com branco ou com outra cor saturada: a mistura linear mantém o ponto médio vívido, enquanto a mistura ingênua em sRGB o achata.

Como usar este misturador

Escolha duas cores nos seletores (ou cole códigos hex), e arraste o controle de proporção para escolher quanto de B misturar em A. O bloco de resultado se atualiza ao vivo, mostrando valores hex, RGB e HSL. Marque Mostrar 11 paradas para renderizar uma faixa-gradiente de 11 passos entre as duas — útil para escolher cores interpoladas para eixos de gráfico ou frames de animação. Clique em qualquer parada para copiar o hex.

Quando usar o quê

Use este misturador para combinar cores de marca em estados de hover/active, derivar séries interpoladas para gráficos em posições customizadas, construir gradientes de data binding (heatmap de frio para quente), ou checar rapidamente se duas cores produzem um ponto médio sujo antes de comprometer-se com um gradiente. Para estados de UI, paradas em 25%, 50% e 75% dão uma rampa coerente sem buracos visuais. Para visualização de dados, 11 paradas casam com uma escala 0-100 típica (a cada 10%) — sem matemática extra.

Como a mistura é calculada

Cada cor de entrada é decodificada de gama de sRGB para sRGB linear: valores abaixo de 0.04045 são divididos por 12.92, o resto passa por ((c + 0.055) / 1.055)^2.4. Os dois valores lineares são então interpolados linearmente por canal: saída = A·(1−t) + B·t onde t é a posição do controle. Por fim o resultado é codificado de volta em gama sRGB e mapeado para o intervalo de bytes 0-255. É o mesmo pipeline que editores de imagem modernos usam para renderização precisa de gradientes.

Mistura em diferentes espaços de cor

sRGB ingênuo: rápido, intuitivo, mas produz pontos médios escuros/sujos — evite para misturas vívidas. sRGB linear (o que usamos): adição de luz fisicamente precisa; pontos médios continuam brilhantes. HSL: bom para rampas de matiz mas interpola mal em regiões de baixa saturação. OKLCH: perceptualmente uniforme; padrão-ouro para design tokens mas mais complexo de calcular. Para mistura cotidiana de cores, sRGB linear faz o equilíbrio certo entre precisão e simplicidade.

Perguntas frequentes

Por que minha mistura 50/50 parece mais brilhante do que esperado?

Porque misturamos em espaço de luz linear, que modela como fótons realmente se combinam. Mistura ingênua em sRGB codificado em gama escurece pontos médios — esse é o visual opaco e cinzento dos apps de pintura antigos. O resultado mais brilhante aqui é fisicamente mais preciso; se você precisa do visual legado, misture em HSL com média de luminosidade.

Qual a diferença entre misturar e gradiente?

Misturar produz uma cor de saída em uma proporção; um gradiente é a visualização de toda saída entre 0% e 100%. O modo de 11 paradas une os dois — amostra o gradiente em 11 proporções discretas, suficiente para detectar bandas de cor ou escolher cores intermediárias amigas de gráfico.

Por que 11 paradas, não 10?

Onze paradas dão os dois extremos (0% e 100%) mais nove pontos médios igualmente espaçados — a mesma densidade que linear-gradient usa internamente para paradas em porcentagem. Com dez paradas você perderia o início ou o fim da rampa.

Misturar duas cores complementares sempre dá cinza?

Sim, por definição — é assim que pares complementares são construídos. O ponto médio de vermelho e ciano, ou amarelo e azul, cai no eixo acromático. Útil como teste de sanidade: se sua paleta supostamente complementar não dá em quase neutro no ponto médio, as cores não são verdadeiramente complementares.

Posso misturar mais de duas cores?

Não em uma única passada nesta ferramenta — ela é deliberadamente focada em mistura de duas cores. Para construir um gradiente multi-parada, misture pares sequencialmente: combine A e B para chegar em C, depois combine C e D, e assim por diante. Ou use nosso Gerador de Harmonia de Cores para distribuir três ou mais cores com uma relação geométrica conhecida.

Canais alpha são suportados?

Ainda não — o misturador assume que ambas as entradas são totalmente opacas. Misturar cores com valores de alpha diferentes exige decisões de alpha simples vs pré-multiplicado que dependem do caso de uso (overlay de UI vs composição de imagem), então mantemos esta ferramenta focada em misturas opacas. Para pilhas semi-transparentes, sobreponha as cores com background em CSS direto.

Misturador de Cores