Analisador de proporção de cores 60:30:10

O que é o analisador de proporção de cores 60:30:10?

O analisador de proporção de cores 60:30:10 agrupa cores parecidas de uma imagem carregada para mostrar qual família cromática constrói a base visual, qual funciona como camada intermediária e qual cria o ponto focal. Em vez de simplesmente pegar as três maiores cores, a ferramenta junta tons próximos em uma mesma família para chegar mais perto da percepção real da imagem.

O resultado mostra um índice de aderência à distribuição 60% dominante, 30% secundária e 10% de destaque. Você também vê qual família chega mais perto de 60, se a cor de destaque está fraca ou forte demais e se ela fica concentrada em uma área ou se espalha pela imagem toda. Isso ajuda em apresentações, thumbnails, ilustrações, interfaces web e análises de referências visuais.

Quando usar esta ferramenta

• Análise de cenas de animação — Quando você quer entender por que uma cena parece estável e onde a cor focal atua
• Leitura de referências de marca ou thumbnail — Quando você precisa decompor rapidamente a estrutura de cor de uma referência em percentuais e famílias cromáticas
• Revisão de mockups de UI — Quando quer conferir se a cor de destaque de um botão está se espalhando demais ou se dominante e secundária ainda estão pouco separadas
• Design de pôsteres e banners — Quando você quer avaliar rapidamente se fundo, áreas de apoio e pontos de destaque estão bem distribuídos
• Estudo de color scripts — Quando você quer registrar a combinação de cores e o padrão de posicionamento de uma imagem em uma linguagem reutilizável

Principais recursos

• Agrupamento automático de tons parecidos — Até variações sutis entram na mesma família para aproximar o resultado do que o olho realmente percebe.
• Pontuação de aderência 60:30:10 — Mostra com nota e frase curta o quanto a imagem se aproxima da distribuição ideal.
• Cartões de cor dominante, secundária e de destaque — Cada cartão reúne a cor representativa, a proporção, as características e uma dica de ajuste.
• Mapa de calor do destaque — Mostra de relance se a cor de destaque se concentra em um ponto ou se se espalha pela imagem inteira.
• Modo de redução da influência do fundo — Ajuda a corrigir a leitura quando um fundo branco ou grandes áreas neutras desequilibram o resultado.
• Ver códigos HEX/RGB/HSL — Converte o código representativo para o formato que você quiser e permite copiar na hora.

Como usar

1. Envie uma imagem — Envie a cena, thumbnail, pôster ou captura de UI que você quer analisar.
2. Escolha o modo de análise — Se a imagem tiver um fundo branco ou preto muito grande, vale manter ativo o modo padrão de redução da influência do fundo.
3. Confira pontuação e papéis — Comece pela nota exibida no topo e pelas proporções dominante, secundária e de destaque.
4. Leia o mapa de calor e as sugestões — Veja onde o destaque se concentra e se vale reduzir ou reforçar essa presença.
5. Reaproveite os códigos — Use os valores HEX, RGB ou HSL mostrados nos cartões e famílias no seu trabalho de design.

Como a análise funciona?

A ferramenta primeiro reduz a imagem para amostragem, ignora pixels transparentes, cria grupos de cor e depois junta tons próximos. A partir desses grupos representativos, ela define os papéis dominante, secundário e de destaque e calcula a área ocupada por cada um.

A cor de destaque não é escolhida apenas como a terceira maior cor. A ferramenta prioriza grupos menores, mas com saturação e contraste suficientes para puxar o olhar. Depois ela divide a imagem em uma grade, mede a distribuição desse destaque e mostra se o foco está concentrado ou espalhado.

O resultado é um apoio de interpretação. A ferramenta não entende sozinha narrativa, luz, profundidade ou intenção de marca, então a decisão final de design deve sempre ser lida junto com o contexto.

Perguntas frequentes