A Paleta de Cores analisa cada elemento numa página web e extrai o conjunto completo de cores utilizadas — desde texto e fundos a bordas, sombras e destaques. As cores são exibidas como amostras visuais ordenadas por frequência (as mais utilizadas primeiro), cada uma mostrando o seu valor HEX e contagem de utilização. Clique em qualquer amostra para copiar, ou exporte a paleta completa como uma lista de códigos de cores.
Cada website bem desenhado tem uma paleta de cores consistente — geralmente 3-8 cores primárias mais algumas neutras. A Paleta de Cores extrai esta paleta automaticamente analisando os valores computados de color, background-color, border-color e box-shadow de cada elemento. O resultado é uma coleção ordenada por frequência de cada cor na página, dando-lhe a imagem completa do sistema de cores do site. As cores dominantes (a cor primária da marca, a cor de fundo, a cor do texto) aparecem primeiro com contagens de utilização elevadas. Cores de destaque e valores únicos aparecem mais abaixo. Isto é inestimável para a pesquisa de design — visite qualquer website e extraia a sua paleta de cores exata em segundos. Também é útil para auditar o seu próprio site: existem cores perdidas que não pertencem ao seu sistema de design? Está a usar 5 tons ligeiramente diferentes de cinzento quando a especificação do design define apenas 3? A Paleta de Cores torna toda a utilização de cores visível e contável.
Analisa cada elemento visível na página e extrai cores das propriedades computadas: color, background-color, border-color, box-shadow color, outline-color e text-decoration-color. Cada cor utilizada na página é capturada.
As cores são ordenadas pela contagem de utilização — a cor mais utilizada aparece primeiro. As cores dominantes da marca e os fundos sobem ao topo, enquanto as cores de destaque pontuais aparecem em último. Veja instantaneamente as cores primárias, secundárias e de destaque da página.
Cada cor é renderizada como uma amostra visual grande com o seu código HEX e contagem de utilização exibidos abaixo. As amostras são suficientemente grandes para distinguir diferenças de tons subtis (como #333 vs #2a2a2a).
Clique em qualquer amostra de cor para copiar o seu valor HEX para a sua área de transferência imediatamente. Não é necessário abrir um painel de cores ou diálogo secundário — um clique, copiado, pronto.
Clique em "Exportar Tudo" para copiar a paleta completa como uma lista formatada de códigos de cores HEX. Cole numa ferramenta de design, ficheiro de variáveis CSS ou documentação de cores. A lista preserva a ordem de classificação por frequência.
As cores são normalizadas (as representações rgb e hex da mesma cor são fundidas) e desduplicadas. A paleta mostra apenas cores únicas, com contagens de utilização combinadas para representações duplicadas.
Visite websites com esquemas de cores bonitos e extraia a sua paleta exata. Use as cores como ponto de partida para o seu próprio design — ou simplesmente documente quais as combinações de cores que funcionam bem juntas.
Execute a Paleta de Cores no seu próprio site para verificar a consistência das cores da marca. Existem 4 azuis ligeiramente diferentes onde deveria haver apenas 1? Estão a surgir cores fora da marca? A ordenação por frequência torna as inconsistências óbvias.
Exporte a paleta e converta-a em propriedades personalizadas CSS (--color-primary, --color-secondary, etc.). A saída ordenada por frequência indica-lhe quais as cores que merecem os papéis primário, secundário e de destaque.
Extraia paletas de cores de websites de concorrentes para compreender o seu posicionamento de marca. Cores quentes vs cores frias, alto contraste vs tons suaves — a paleta revela escolhas de design intencionais.
Veja todas as cores de texto ao lado das cores de fundo. Alguma combinação de texto-fundo tem um contraste demasiado baixo? A paleta dá-lhe o conjunto completo de cores para verificar em relação aos requisitos de contraste WCAG.
Abra a doca flutuante do DevSuite Pro e clique no ícone Paleta de Cores. A ferramenta analisa cada elemento na página e extrai todos os valores de cor.
Aparece uma grelha de amostras de cores, ordenada pela frequência de utilização. As cores mais utilizadas estão no topo. Cada amostra mostra o código HEX e o número de elementos que utilizam essa cor.
Clique em qualquer amostra para copiar o seu valor HEX para a sua área de transferência. Uma breve confirmação aparece.
Clique em "Exportar Tudo" para copiar cada cor como uma lista formatada. Cole no seu ficheiro de variáveis CSS, ferramenta de design ou documentação.
Navegue para diferentes páginas no mesmo site e extraia paletas para verificar a consistência das cores em todo o site.
Instale o DevSuite Pro gratuitamente e desbloqueie mais de 39 ferramentas de desenvolvedor para seu navegador.
