Dá para extrair cores e fontes de um site de dois jeitos: à mão, pelo DevTools do navegador, lendo os estilos calculados e as variáveis CSS; ou com uma extensão que lê a página e devolve paleta, tipografia e espaçamentos. O melhor resultado sai quando tudo vira design tokens.
O que são design tokens, afinal?
O Design Tokens Format Module, rascunho do Design Tokens Community Group de 08/09/2026, define token como uma informação associada a um nome legível por humanos: no mínimo, um par nome e valor. O próprio texto dá exemplos como uma cor de texto primária e um tamanho de título.
A especificação propõe um arquivo JSON em que cada token tem $type e $value, com extensão .tokens ou .tokens.json. Os tipos previstos incluem cor, dimensão, família de fonte, peso de fonte, duração, curva cúbica de Bézier, sombra, gradiente e tipografia. O documento avisa que é uma prévia e que ainda não deve ser implementado como versão final.
Na prática, um token pequeno fica assim:
{
"color": {
"text-primary": { "$type": "color", "$value": "#0b0b0f" }
},
"space": {
"4": { "$type": "dimension", "$value": "16px" }
}
}Por que isso importa para quem estuda um site? Porque uma lista de hexadecimais não diz qual cor é fundo, qual é texto e qual é destaque. O token diz. É a diferença entre copiar uma cor e entender um sistema.
Como descobrir a fonte, as cores e os espaçamentos pelo DevTools?
O caminho manual é gratuito, funciona em qualquer site e ensina mais do que qualquer extensão. Abra o site, clique com o botão direito no elemento e escolha Inspecionar.
Comece pelo :root
na aba Elements, selecione a tag html e procure no painel Styles as variáveis que começam com dois hífens, como --color-bg ou --font-display
Leia o valor das variáveis
passe o mouse sobre cada --custom-property para ver o valor, e clique num var() para ir até a declaração original
Abra o Computed
em um título e em um parágrafo, anote font-family, font-size, font-weight, line-height, letter-spacing e color, que são os valores que o navegador de fato aplicou
Confirme a fonte na rede
na aba Network, recarregue a página com o filtro Font e veja quais arquivos .woff2 chegaram, o que separa a fonte declarada da fonte que realmente carregou
Meça os espaçamentos
no diagrama de caixa do Computed, anote padding, margin e gap de botões, cards e seções, e procure o padrão que se repete
Passe a limpo em tokens
dê nome por função (fundo, texto, destaque, título, corpo, espaço pequeno, médio, grande) e escreva o arquivo com $type e $value
Dois atalhos ajudam. O painel CSS Overview do Chrome resume o estilo da página e acelera a primeira leitura. E os filtros da aba Rede, como Font, JS e Media, mostram o que o site realmente baixou, sem depender do que o CSS promete.
Qual ferramenta extrai cores e fontes de um site?
Se o objetivo é velocidade, uma extensão resolve em segundos. A tabela abaixo mostra só o que a página oficial de cada uma confirmava em outubro de 2026. Onde a página não diz, a célula diz que não diz.
| Ferramenta | O que extrai | Exporta como | Grátis? | Navegador |
|---|---|---|---|---|
| WhatFont | Nome da fonte ao passar o mouse; estilos aplicados ao clicar | A página não informa | Sim | Chrome |
| Fonts Ninja | A página oficial não detalha a extensão | Não informado | Não informado | Não informado |
| CSS Peeper | Cores, contraste, tipografia, propriedades CSS e assets | Paleta de cores com um clique | Versão grátis e planos pagos | Chrome |
| ColorZilla | Conta-gotas, seletor de cor e analisador que gera a paleta da página | A página não informa | Sim | Chrome e Firefox |
| Design Token Extractor | Cor, escala tipográfica, espaçamento, raio e sombra | Variáveis CSS, JSON no formato W3C e estilos Figma via Tokens Studio | Sim | Firefox |
| Extrator Brave Cross | O site inteiro funcionando offline, mais o design system com cores e fontes em tokens | Tokens junto do site baixado | 2 downloads por mês, sem cartão; assinatura para mais | Chrome, Brave, Edge, Opera, Vivaldi e Arc |
Fontes: páginas oficiais e lojas de extensões abertas em outubro de 2026: WhatFont na Chrome Web Store (versão 3.2.0, março de 2024), Fonts Ninja, CSS Peeper, ColorZilla na Chrome Web Store (versão 4.1, maio de 2024), Design Token Extractor no Firefox (versão 1.0.0, agosto de 2026) e Extrator.
Leitura rápida da tabela. WhatFont e ColorZilla resolvem uma pergunta de cada vez: qual é a fonte, qual é a cor. CSS Peeper reúne as duas numa visão só e é a alternativa mais lembrada no Chrome. O Design Token Extractor é o único da lista que exporta direto no formato da especificação, mas roda só no Firefox.
O Extrator parte de outro lugar. Ele baixa o site inteiro, com animações, 3D, fontes e vídeo, e entrega o design system junto. Você estuda o arquivo original no seu computador e já sai com as cores e as fontes organizadas. O passo a passo do download está no guia como baixar um site completo e abrir offline, e a comparação com outros programas, em HTTrack, SingleFile, wget ou extensão.
O que a extensão não vê e você precisa conferir?
Nenhuma ferramenta lê intenção. Ela pode devolver dezenas de tons de cinza quando o site usa poucos e o resto é sombra, borda ou transparência. Sempre agrupe por função antes de salvar.
Fonte declarada também não é fonte carregada. Um font-family pode listar três nomes e o navegador usar o terceiro. A aba Rede, filtrada por Font, tira a dúvida.
Espaçamento é o que mais escapa. Raramente está em variável, então vale medir cinco ou seis componentes e procurar a escala que se repete. Quando o padrão aparece, ele vira uma sequência de tokens de dimensão.
A regra da Brave Cross é simples: estude, referencie e faça backup do que é seu. O limite legal entre inspiração e cópia está em copiar site é crime?.
Como usar os tokens extraídos num projeto seu?
Tokens servem para decidir, não para repetir. Use a referência para entender a proporção entre título e corpo, o contraste entre fundo e destaque e o ritmo dos espaços. Depois troque os valores pelos da sua marca e mantenha a estrutura.
Esse exercício faz parte de um roteiro maior de estudo, que inclui ler a aba Rede e identificar as bibliotecas de animação. Ele está em como estudar um site do Awwwards por dentro. Se você ainda está aprendendo CSS, variáveis e layout, a Brave Cross Education tem um curso de Front-End no catálogo. E para quem quer transformar esse olhar em sites vendidos, o Método mostra o caminho.
Perguntas frequentes
Como descobrir qual fonte um site usa?
Clique com o botão direito no texto, escolha Inspecionar e veja font-family na aba Computed. Para confirmar qual arquivo carregou, abra a aba Network, filtre por Font e recarregue a página. Extensões como WhatFont, grátis na Chrome Web Store segundo a página da loja em outubro de 2026, mostram o nome ao passar o mouse.
Como pegar a paleta de cores de um site?
O caminho mais rápido é uma extensão com analisador de página, como o ColorZilla, cuja página na Chrome Web Store descreve um Webpage Color Analyzer que gera a paleta do site. No DevTools, procure as variáveis CSS no :root. Depois agrupe as cores por função: fundo, texto, destaque, borda e estado.
O que são design tokens?
São pares de nome e valor que guardam decisões de design, como uma cor de texto ou um tamanho de título. O rascunho do Design Tokens Community Group de setembro de 2026 propõe um arquivo JSON com $type e $value e extensão .tokens ou .tokens.json, para que ferramentas de design e código leiam o mesmo valor.
Qual é uma alternativa ao CSS Peeper?
Depende do que falta. Para exportar no formato da especificação, o Design Token Extractor é grátis e exporta variáveis CSS, JSON e estilos Figma, mas só no Firefox. Para estudar o site inteiro offline e sair com cores e fontes em tokens, o Extrator funciona em Chrome, Brave, Edge, Opera, Vivaldi e Arc.
Posso usar a fonte que descobri em outro site?
Só com licença. Saber o nome da fonte não autoriza usar o arquivo que o site carrega, porque a licença costuma valer para o domínio de quem comprou. Se a fonte for paga, licencie na fundição. Se for aberta, baixe da fonte oficial e confira os termos antes de publicar.
Do print ao sistema: o próximo passo
Uma referência vale pelo que você entende dela, não pelo que você guarda. Cores, fontes e espaços organizados em tokens viram vocabulário: dá para comparar sites, explicar escolhas a um cliente e começar um projeto com decisões claras.
Se quiser pular a parte braçal, o Extrator baixa o site e entrega o design system junto, com 2 downloads grátis por mês e sem cartão. Gere o design system de um site em um clique com o Extrator.