Extrator de tokens CSS
CSS Token Extractor
Extrai cores, espaçamentos, raios e fontes de uma folha de estilo e propõe um conjunto de propriedades personalizadas.
Lê uma folha de estilo, conta cada cor, comprimento, raio, fonte e sombra nela, e propõe uma `--variável` para cada um, ordenadas pela frequência de uso. Depois consegue reescrever a folha de estilo para usá-las. É um scanner de declarações construído sobre o tokenizador do formatador de CSS, não um parser completo nem um linter — diz quais valores estão no arquivo, que é a parte tediosa de fazer à mão.
CSS de entrada
Solte um arquivo .css
Lido só nesta aba.
Tokens propostos
Vai na frente, como em --app-color-1.
Declarações
29
Cores
11
Valores de espaçamento
5
Raios
3
Fontes
1
Variáveis que já existiam
1
Cores 11
- #6366f1×2
- #fff×2
- #1f2937×1
- rgba(0,0,0,.06)×1
- rgba(0,0,0,.08)×1
- #111827×1
- #4b5563×1
- #4f46e5×1
- #eef2ff×1
- #4338ca×1
- #e5e7eb×1
Espaçamento 5
- 4px×1
- 8px×3
- 16px×4
- 24px×3
- 32px×1
Raios 3
- 8px×1
- 12px×1
- 999px×1
Tamanhos de fonte 3
- 12px×1
- 14px×2
- 20px×1
Alturas de linha 1
- 1.6×1
Fontes 1
- "Pretendard", system-ui, sans-serif×1
Sombras 2
- 0 1px 2px rgba(0,0,0,.06)×1
- 0 8px 24px rgba(0,0,0,.08)×1
Como ele lê o arquivo
- · Lido com o tokenizador do formatador de CSS, então um
url()ou um#fffdentro de uma string não conta como cor, ecalc()fica inteiro. - · As cores são normalizadas para hex, então #FFF, white e rgb(255 255 255) viram uma entrada só, com a contagem. Os nomes são numerados por frequência de uso, então --color-1 costuma ser a cor da marca ou a do texto — renomeie.
- · O espaçamento vem só de margin, padding, gap e das propriedades inset, e os raios só de border-radius, numerados por tamanho. width e height ficam de fora: são dimensões, não ritmo.
- · O JSON tem o formato do rascunho W3C Design Tokens (DTCG), com $type e $value. “CSS reescrito com var()” troca só as combinações exatas de valor e não encosta em nenhum outro caractere.
Para montar uma escala a partir de uma cor que você tirou daqui, a escala de tons e matizes faz isso; para o modo escuro, a paleta para modo escuro.
Como usar
Cole a folha de estilo, ou solte o arquivo
Um arquivo de cada vez. O exemplo que carrega primeiro está ali para mostrar a forma da saída antes de você ir buscar o seu próprio CSS.
Leia as contagens antes dos tokens
Quarenta cores em um arquivo que deveria ter doze é o achado. As listas agrupadas abaixo mostram cada valor com o número de vezes que aparece, então as que valem um nome ficam no topo e as de uma única ocorrência — que normalmente são erros ou regras mortas — ficam no fim.
Defina um prefixo se o projeto precisar de um
Vazio dá `--color-1`; digitar `app` dá `--app-color-1`. De qualquer modo os números são a classificação de uso, não um significado, então renomeie-os quando souber para que serve cada valor.
Pegue as variáveis, o JSON ou o arquivo reescrito
A saída CSS é um bloco `:root` para colar no topo. O JSON é a forma do rascunho W3C Design Tokens, para uma etapa de build ou uma ferramenta de design. A reescrita é a folha de estilo original com as correspondências exatas de valor trocadas por `var()` e nada mais tocado — leia o diff antes de fazer commit.
Perguntas frequentes
O CSS reescrito é seguro para publicar como está?
Leia o diff primeiro. A substituição é textual e só por correspondência exata, então não vai quebrar um valor que não reconhece, mas também não consegue saber que dois cinzas idênticos significam duas coisas diferentes — uma cor de borda e um rótulo desabilitado que por acaso compartilham um hexadecimal vão receber a mesma variável, e mais tarde alguém muda um deles. Nomear os tokens direito é a etapa que pega isso, e é uma etapa humana.
Por que width e height estão faltando na lista de espaçamento?
De propósito. Espaçamento é um ritmo — margens, padding, gaps, insets — e um design system o transforma em tokens. Larguras e alturas são dimensões: uma barra lateral de 240px e um alvo de toque de 44px não são dois pontos na mesma escala, e colocá-los na lista enterra os valores que são.
Ele lida com SCSS, Less ou CSS-in-JS?
Só CSS puro com confiabilidade. O tokenizador atravessa boa parte de um SCSS, mas aninhamento, corpos de `@mixin` e valores interpolados não são resolvidos, então as contagens derivam. Compile primeiro e faça a varredura na saída — que é também o arquivo que o navegador realmente vê.
Ele encontrou uma cor dentro de uma URL. Encontrou?
Não — esse caso é tratado. A varredura roda sobre o tokenizador do formatador de CSS, então um `#fff` dentro de um `url()` ou de uma string é uma string, e `calc()` é deixado inteiro em vez de ser desmontado em comprimentos. Esses são os dois lugares em que uma expressão regular erra isso.
Pode receber de
Formatador e minificador de CSS
CSS Beautifier & Minifier
Formata ou minifica CSS sem reordenar nada, preservando exatamente o fluxo de tokens.
Gerador de paleta de cores
Palette Generator
Monta uma paleta harmoniosa a partir de uma cor base usando regras complementar, triádica e análoga.
Paleta para modo escuro
Dark Mode Palette
Monta uma rampa 50–950 a partir de uma cor e a espelha numa versão escura, para que cada par de tokens mantenha o contraste.
Cor Tailwind mais próxima
Nearest Tailwind Colour
Encontra a entrada da paleta Tailwind mais próxima de qualquer cor e mostra a distância perceptual.
Em seguida
Estas aceitam o que esta ferramenta produz, então o resultado pode ir direto.
Escala de tons e matizes
Tint & Shade Scale
Gera uma escala de luminosidade 50–950 a partir de uma cor com passos perceptualmente uniformes, pronta como tokens de design.
Formatador e minificador de CSS
CSS Beautifier & Minifier
Formata ou minifica CSS sem reordenar nada, preservando exatamente o fluxo de tokens.
Paleta para modo escuro
Dark Mode Palette
Monta uma rampa 50–950 a partir de uma cor e a espelha numa versão escura, para que cada par de tokens mantenha o contraste.
Gerador de paleta de cores
Palette Generator
Monta uma paleta harmoniosa a partir de uma cor base usando regras complementar, triádica e análoga.
Conversor de formato de cor
Colour Format Converter
Converte uma cor entre HEX, RGB, HSL, HWB, LAB, LCH e OKLCH e nomeia a cor conhecida mais próxima.
Seletor de cores
Colour Picker
Escolhe uma cor num campo OKLCH, com conta-gotas de tela ou a partir de uma imagem enviada, e a copia em qualquer notação.