21.04.2025

Cálculo da Cor Média Entre Dois Códigos HEX em RGB

Resposta Rápida

Para determinar a cor média entre duas cores especificadas, é necessário fazer a média dos seus valores RGB. Como exemplo, aqui está uma função em JavaScript:

function midpointColor(hex1, hex2) {
  let lerp = (a, b) => Math.round((a + b) / 2);
  let hexToRgb = hex => parseInt(hex.slice(1), 16);
  let rgbToHex = rgb => '#' + rgb.toString(16).padStart(6, '0'); 
  let color1 = hexToRgb(hex1), color2 = hexToRgb(hex2);
  let blendedColor = lerp(color1 >> 16, color2 >> 16) << 16 | lerp((color1 >> 8) & 0xFF, (color2 >> 8) & 0xFF) << 8 | lerp(color1 & 0xFF, color2 & 0xFF);
  return rgbToHex(blendedColor);
}

console.log(midpointColor('#ff0000', '#0000ff')); // #800080, isso resultará em um verdadeiro tom de roxo.

Este método realiza interpolação linear (lerp) para um par de cores hexadecimais e retorna o código hexadecimal da cor resultante.

Nuâncias do Trabalho com RGB e Percepção Humana de Cores

Não Uniformidade do Espaço de Cores RGB

RGB pode parecer uma ferramenta simples e óbvia, mas fazer a média de cores neste espaço muitas vezes resulta em resultados visualmente inconsistentes. Isso se deve à negligência da percepção neste espaço de cores.

Para Resultados Mais Precisos, Use HSL

Para alcançar uma transição mais natural entre cores, pode-se converter as cores de RGB para HSL (Matiz, Saturação, Luminosidade), criar um gradiente neste espaço e, em seguida, convertê-lo de volta para RGB. Isso levará melhor em conta a percepção humana de cores.

Importância de Conhecer Diferentes Linguagens de Programação

Um programador pode ter várias linguagens de programação à sua disposição. Incluir trechos de código em linguagens como Python, C# ou Java tornará este material benéfico para um público mais amplo.

Ferramentas Prontas para Trabalhar com Cores

Para aqueles que trabalham com pré-processadores CSS, a função mix() do LESS pode ser inestimável. Serviços web como ColorBlender podem ajudar a encontrar rapidamente um tom intermediário entre duas cores especificadas.

Visualização

Suponha que você está misturando dois tons de tinta para obter uma nova cor que fica exatamente no meio entre as originais:

Cor A (🎨🔴): Vermelho Puro
Cor B (🎨🔵): Azul Puro

Misturar vermelho e azul em proporções iguais gera roxo:

🔴 + 🔵 = 🟣

O processo de encontrar o tom intermediário se assemelha a misturar uniformemente cada uma das cores originais. Aqui está um exemplo em código:

| Mistura      | Cor |
|--------------|-----|
| 50% 🔴       |     |
| 50% 🔵       | 🟣  |

Assim, a cor média pode ser encontrada fazendo a média dos valores RGB de cada uma das cores originais.

Expandindo o Tema: Recursos Técnicos e Técnicas de Programação

Importância da Formatação

Preste atenção em como formatar corretamente os valores hexadecimais — todos os componentes RGB devem ser representados por dois caracteres. Usar a função padToTwo() ajudará a evitar erros de formatação.

Fazendo a Média de Códigos Hex

Para encontrar a cor média, crie uma função hexAverage() usando Array.reduce(), que resultará nos resultados mais precisos.

Considerando a Percepção de Cores

É importante considerar as nuanças da percepção humana de cores. Utilizar espaços de cores como HSL/HSV tornará o resultado mais visualmente atraente e evitará que você tenha que se explicar para os designers!

Combinando Recursos

Ao utilizar fontes online como Programming-Idioms, você pode se equipar com exemplos de código em diferentes linguagens. Este recurso ajudará a calcular cores médias e será benéfico para desenvolvedores em todo o mundo.

Recursos Úteis

1. CSS Gradient — Gerador, Criador e Fundo — uma ferramenta interativa para criar gradientes em CSS.
2. Calcular cor HEX tendo 2 cores e percentagem/posição - Stack Overflow — discussão sobre cálculo de cores intermediárias em HEX.
3. linear-gradient() - CSS: Folhas de Estilo em Camada | MDN — documentação oficial para a função linear-gradient().
4. Color Blender — uma ferramenta para misturar cores, ajudando a determinar tonalidades intermediárias.
5. Misturador de Cores HTML — mais informações sobre o processo de mistura de cores.
6. RGB para HSL e HSL para RGB — guia sobre conversão entre modelos de cores RGB e HSL.

Video

Navigation