Cor média de uma lista

Quando um kit de marca, uma série de gráficos ou um arquivo de tokens de design entrega a você um monte de amostras hex, muitas vezes você precisa de uma só cor que represente o conjunto: uma miniatura de pasta, um chip de média da paleta, um preenchimento padrão ou uma checagem de que um token novo não puxou o grupo para um matiz surpresa. Esta calculadora de cor média de uma lista recebe códigos hex e devolve a média aritmética dos canais vermelho, verde e azul, arredondada para inteiros 0–255, mais um token hex de seis dígitos que você pode colar no CSS. O caminho é determinístico: a mesma lista sempre produz o mesmo hex.

Como a média RGB de uma lista de cores é calculada

Envie uma lista de cores hex. Cada amostra se expande em três canais inteiros no intervalo de zero a duzentos e cinquenta e cinco. A forma curta de três dígitos, como #f00, duplica cada nibble, de modo que #f00 e #FF0000 são o mesmo vermelho puro.

Uma cerquilha inicial opcional é removida antes da validação; o prefixo 0x é rejeitado para que um inteiro empacotado nunca seja confundido com um token de cor. Depois que cada amostra é analisada, o solver soma os vermelhos, os verdes e os azuis e divide cada soma pela quantidade de cores. Esse quociente é a média aritmética daquele canal.

Cada média é arredondada para o inteiro mais próximo com a regra de meio para cima em números positivos, então cento e vinte e sete ponto cinco vira cento e vinte e oito, e o resultado é limitado à faixa legal 0–255. Os três inteiros viram o hex de resultado com seis dígitos maiúsculos e cerquilha.

A média RGB linear não é um ponto médio perceptual em LAB ou HSL: um amarelo neon e um azul-marinho quase preto podem puxar a média para o pai mais claro porque o espaço de canais não é uniforme. Esse é o contrato documentado deste produto, e é a mesma média que designers já calculam em planilhas e scripts de tema. Uma única cor é uma lista válida e devolve a si mesma após a normalização.

Duas cópias do mesmo hex ainda devolvem esse hex. Vermelho puro, verde puro e azul puro juntos dão um cinza médio, porque cada canal soma duzentos e cinquenta e cinco em três amostras.

Quando uma cor precisa representar o conjunto

Sistemas de design comprimem uma paleta de marca em um chip para uma pasta, uma miniatura de componente do Figma ou um ladrilho de marketing que precisa representar muitos tokens de uma vez. Bibliotecas de gráficos escolhem uma cor padrão de série a partir dos traços já usados para que uma linha nova não choque por acaso. Tarefas de integração contínua calculam o hash do hex devolvido e falham o build quando uma mudança de token desloca a média da paleta além do que uma revisão permite.

Esta landing é a ferramenta dedicada à cor média de uma lista: não é color.mix, que mistura exatamente dois hex em uma proporção escolhida, nem um extrator de cor dominante de imagem que lê pixels de uma fotografia. Prefira-a quando a intenção de busca for resumir estas amostras, não misturar duas, não converter formatos e não puxar cores de um bitmap.

Mantenha a lista em no máximo duzentas e cinquenta e seis amostras, fixe hex e rgb nos testes e você terá uma cor-resumo reproduzível para tickets, plugins LMS e workers de borda sem montar uma biblioteca própria de gestão de cor.