Cores a partir de uma URL
Extrator de cores de sites
O Extrator de cores de sites lê o HTML e o CSS de um site a partir da URL e retorna a paleta de cores do site: a cor da marca, os destaques, os fundos, o texto e as bordas, com a variável CSS e a proporção de uso de cada cor.
- Grátis, sem cadastro
- Lê o CSS real e as variáveis
- Nada é armazenado
Site bloqueado? Cole o HTML ou CSS dele
Como funciona o extrator de cores de sites?
O extrator de cores de sites baixa uma página e as folhas de estilo dela, lê cada valor de cor no código e classifica as cores por onde e com que frequência a página as usa.
Digite um endereço
Digite um domínio como example.com ou cole a URL completa de qualquer página pública. O extrator busca a página e até 25 das folhas de estilo dela.
As folhas de estilo são analisadas
Todas as sintaxes de cor são lidas: hex, rgb, hsl, hwb, lab, lch, oklab, oklch, color() e as 148 cores nomeadas. As variáveis CSS são resolvidas para os seus valores.
As cores recebem funções
A propriedade CSS define a função de cada cor: fundo, texto, borda, preenchimento ou sombra. Regras que correspondem a elementos da página contam três vezes.
Copie a paleta
A cor da marca vem primeiro, seguida dos destaques, dos fundos e das cores de texto. Exporte a paleta como CSS, Tailwind ou design tokens.
Como o extrator encontra a cor da marca de um site?
A cor da marca é a cor saturada mais usada que aparece em botões, links ou variáveis CSS com o nome da marca.
- Saturação. Somente cores com croma OKLCH de 0,05 ou mais se qualificam como cores de marca ou de destaque. Cinzas e quase cinzas contam como neutras.
- Posição. Cores em seletores como
.btn,button,ae.ctaganham peso. - Nomes. Variáveis como
--primary,--brande--accentganham peso. - theme-color. Um valor
<meta name="theme-color">que corresponde a uma cor do CSS adiciona um forte sinal de marca.
| Função | Propriedades CSS |
|---|---|
| Fundo | background, background-color, gradientes |
| Texto | color, text-decoration-color, caret-color |
| Borda | border, outline, column-rule |
| Preenchimento | fill, stroke, stop-color, accent-color |
| Sombra | box-shadow, text-shadow (listadas, mas fora da paleta principal) |
Como ele separa as cores usadas do CSS não utilizado?
O extrator dá três vezes mais peso às regras CSS cujos seletores correspondem a elementos no HTML da página. Frameworks CSS trazem muitas cores que uma página nunca usa, e a correspondência de seletores impede que essas cores superem o design real.
- Cores de
:hovere:focuscontam com metade do peso, porque aparecem apenas durante a interação. - Regras
@media printsão ignoradas. - Cores com menos de 35% de opacidade são descartadas como sobreposições e tons.
- Cores mais próximas que ΔE_OK 0,02 se fundem em uma única amostra que lista as suas variantes.
O extrator encontra as cores do modo escuro?
Sim. Regras dentro de @media (prefers-color-scheme: dark) e regras sob seletores como .dark ou [data-theme="dark"] formam uma paleta separada para o modo escuro.
Os valores escuros das variáveis CSS substituem os valores claros quando o extrator resolve uma regra escura, então a paleta escura mostra as cores que um visitante vê no modo escuro.
Quais cores o extrator de sites não consegue ler?
O extrator de sites lê o código que um servidor envia, então três tipos de cor ficam fora do alcance.
- Estilos em tempo de execução. Bibliotecas CSS-in-JS injetam estilos depois que a página carrega no navegador.
- Cores de imagens. Cores dentro de fotos, logotipos rasterizados e vídeos são pixels, não CSS. O extrator lê as cores do logotipo e do ícone do site separadamente.
- Sites protegidos. Sites com proteção contra bots recusam solicitações automatizadas.
Nesses casos, cole o HTML ou o CSS da página na caixa de código, ou faça uma captura de tela e solte-a no Extrator de paleta de cores. O guia Como descobrir as cores que um site usa (em inglês) também aborda métodos com o DevTools do navegador.
Quem usa um extrator de cores de sites?
Designers
Audite as cores de marca atuais de um cliente antes de um redesign ou estude a paleta de um site de referência.
Desenvolvedores
Recupere os tokens de cor e os nomes de variáveis de um site para reconstruir um tema.
Profissionais de marketing
Alinhe landing pages, anúncios e e-mails às cores do site principal.
Revisores de acessibilidade
Teste os pares de texto e fundo do site com os limites de contraste do WCAG na aba Contraste.
Perguntas frequentes sobre o extrator de cores de sites
Por que algumas cores do site não aparecem?
Cores aplicadas por JavaScript em tempo de execução, cores dentro de imagens e cores de páginas que exigem login não aparecem no HTML e no CSS que o servidor envia.
Posso extrair cores de um site que bloqueia bots?
Sim, com uma alternativa. Abra o site no seu navegador e cole o HTML ou uma folha de estilo na caixa de código, ou carregue uma captura de tela no Extrator de paleta de cores.
O extrator armazena os sites que eu verifico?
Não. O servidor busca a página e as folhas de estilo para a sua solicitação e não guarda cópia. A análise de cores roda no seu navegador.
O que significa a porcentagem ao lado de uma cor?
A porcentagem é a proporção da cor no uso ponderado de CSS da página. Ela mede com que frequência o código usa a cor, não quanto da área da tela a cor cobre.
Posso verificar uma página que não seja a inicial?
Sim. Digite a URL completa de qualquer página pública, por exemplo example.com/pricing.