Calculadora de Distância de Cores

Insira duas cores HEX e esta ferramenta mede o quão visualmente similar ou diferente elas são — útil para verificar se uma cor de marca desviou, desduplicar uma paleta, escolher cores de gráfico distinguíveis ou verificar se uma alteração de token de design é sutil em vez de drástica.

O que "distância de cores" significa

Distância de cor é uma pontuação numérica de quão afastadas duas cores estão. A abordagem mais simples trata uma cor como um ponto no espaço RGB 3D (vermelho, verde, azul, cada um 0–255) e mede a distância em linha reta entre dois desses pontos:

Distância RGB Euclidiana: √((R1−R2)² + (G1−G2)² + (B1−B2)²)

Isso varia de 0 (cores idênticas) até cerca de 441,67 (preto puro vs. branco puro — os dois pontos mais distantes no cubo RGB). É fácil calcular, mas não corresponde bem à percepção humana: o olho é muito mais sensível a algumas tonalidades e intervalos de brilho do que outros, portanto dois pares com a mesma distância Euclidiana podem parecer "distantes" de forma muito diferente.

Distância redmean é uma correção bem conhecida e de baixo custo que pondera a diferença quadrada de cada canal com base em quão brilhante o par de cores é (através do valor médio de vermelho), aproximando a sensibilidade humana sem a sobrecarga de uma conversão de espaço de cor completo:

ΔC = √((2 + r̄/256)×ΔR² + 4×ΔG² + (2 + (255−r̄)/256)×ΔB²), em que r̄ é a média dos dois vermelhos.

Como pondera os canais com mais peso, os valores redmean são maiores do que os valores Euclidianos para o mesmo par — eles estão em uma escala diferente, não uma versão "mais precisa" do mesmo número, portanto compare-os separadamente em vez de esperar que concordem.

Como usá-la

1. Insira ou escolha Cor A.
2. Insira ou escolha Cor B.
3. A tabela de resultados é atualizada instantaneamente com ambos os valores hexadecimais, a distância RGB Euclidiana, a distância redmean e uma classificação de similaridade em linguagem simples (Idêntico, Muito Semelhante, Notavelmente Diferente ou Muito Diferente) com base na pontuação Euclidiana.

FAQ

Qual número devo realmente usar? Para uma verificação rápida de sanidade ("estas são basicamente a mesma cor?"), a distância Euclidiana é simples e intuitiva. Se você estiver comparando cores que uma pessoa realmente verá lado a lado (paletas de UI, verificações de consistência de marca), confie no valor redmean — ele acompanha a diferença percebida mais de perto.

O que é considerado "semelhante"? As faixas de classificação (0 = Idêntico, até 25 = Muito Semelhante, até 100 = Notavelmente Diferente, acima de 100 = Muito Diferente) são baseadas na distância Euclidiana em seu intervalo de 0–441,67. São uma regra prática, não um padrão perceptual certificado — para contraste de acessibilidade (legibilidade de texto), use uma ferramenta de proporção de contraste, pois contraste e distância de cor medem coisas diferentes.

Isso leva em conta o daltonismo? Não. Ambas as fórmulas operam em valores RGB padrão e não modelam nenhuma forma específica de deficiência de visão de cores.

Posso usar códigos hexadecimais de 3 dígitos como #f0c? Sim — a notação hexadecimal abreviada (#rgb) é expandida automaticamente para a forma de 6 dígitos completa antes da comparação.

Meus dados de cor são enviados para algum lugar? Não — tudo funciona inteiramente no seu navegador. Nada é enviado ou armazenado.