Extrator de variáveis de cor CSS

Encontre cada cor na sua folha de estilos e transforme-a em propriedades personalizadas reutilizáveis.

Entrada

Fundir tonalidades semelhantes dentro de0

Nomes das variáveisFundir cores iguais escritas de forma diferente (hex, rgb, hsl)Notação do valor da variávelSeletor do bloco de variáveisListar apenas cores, não reescrever o CSS

Saída

Extrator de variáveis de cor CSS

Cole uma folha de estilos e esta ferramenta varre cada declaração em busca de valores de cor escritos como hex, rgb()/rgba() ou hsl()/hsla(), e depois reescreve as regras para fazer referência a propriedades personalizadas em vez de repetir o mesmo valor em toda parte. Foi desenvolvida para limpar uma folha de estilos que cresceu organicamente — uma reformulação, uma fusão de biblioteca de componentes ou CSS extraído de uma ferramenta de design — onde o mesmo azul acaba sendo digitado uma dúzia de formas ligeiramente diferentes.

A opção de nomeação controla como cada variável é nomeada: por ordem de primeira aparição (--color-1, --color-2…), por uma tonalidade aproximada e leveza (--color-dark-blue, --color-light-gray), ou pela propriedade em que aparece primeiro (--color-background, --color-border). Ative "fundir cores iguais escritas de forma diferente" para dobrar #ff0000, rgb(255, 0, 0) e hsl(0, 100%, 50%) numa única variável, mesmo que o texto-fonte seja diferente; valores idênticos são sempre fundidos independentemente. O controlo deslizante de semelhança vai mais longe e funde tonalidades que são próximas mas não idênticas — útil quando uma paleta acumulou cinzentos ou azuis quase-duplicados ninguém pretendia criar. Escolha se o bloco gerado fica sob :root ou um seletor personalizado, escolha a notação que as variáveis imprimem, ou mude para uma lista simples de cores e contagens de ocorrências quando pretende apenas uma auditoria em vez de uma reescrita.

O scanner procura apenas dentro de valores de declaração reais, por isso nunca confunde um seletor ID como #abcabc com uma cor, e deixa comentários, cadeias entre aspas e conteúdos de url() completamente intocados. Finais de linha Windows e Unix funcionam ambos, e a ferramenta não é enganada por funções aninhadas como uma cor dentro de uma lista de gradiente.

Tudo funciona localmente no seu navegador — a sua folha de estilos nunca é carregada em lado nenhum, por isso é seguro colar código de um projeto privado. Copie o resultado, descarregue-o como ficheiro .txt, ou envie a saída de volta para a entrada para refiná-la com outra passagem.

FAQ

Quais são os formatos de cor que reconhece?

Hex (#rgb, #rgba, #rrggbb, #rrggbbaa), rgb()/rgba() e hsl()/hsla(), em ambas as sintaxes com vírgula e espaço. Cores nomeadas como "red" não são correspondidas.

O que conta como "a mesma cor" para fusão?

Valores idênticos em bytes são sempre fundidos. Ativar a opção de equivalência também funde a mesma cor escrita numa notação diferente (hex vs rgb vs hsl). O controlo deslizante de semelhança funde adicionalmente tonalidades que são apenas próximas, por uma diferença média de canal que controla.

Como são escolhidos os novos nomes das variáveis?

Por ordem de primeira aparição, por um nome aproximado de tonalidade e leveza, ou pela propriedade CSS em que a cor foi encontrada primeiro — sua escolha. Uma colisão recebe um sufixo numérico.

Vai tocar em cores dentro de comentários, cadeias ou url()?

Não. Apenas cores em valores de declaração reais são correspondidas — texto dentro de comentários, cadeias entre aspas e conteúdo de url(...) é deixado exatamente como escrito.

O meu CSS é carregado em qualquer lugar?

Não. A extração funciona inteiramente no seu navegador — a sua folha de estilos nunca deixa o seu dispositivo.

Extrator de variáveis de cor CSS

Ferramentas relacionadas

Extrator de variáveis de cor CSS

FAQ