Pular para o conteúdo
nearnull

Extrator de Cores CSS

Cole CSS, SCSS ou HTML e obtenha todas as cores usadas, sem duplicatas e contadas, prontas para exportar como lista ou variáveis CSS. Funciona totalmente no seu navegador: nada é enviado a nenhum servidor.

8 cores
Ordenar por
Copiar e baixar como

O que é um extrator de cores CSS?

Um extrator de cores CSS percorre o código procurando cada cor usada e lista cada uma uma única vez, para você ver a paleta real de um projeto em vez da paleta do guia de estilo. Este encontra valores HEX, rgb(), hsl(), lab(), lch(), oklab() e oklch() em qualquer parte do texto, e nomes de cor CSS dentro dos valores das declarações, e depois unifica as grafias que produzem a mesma cor, como #2563eb, #2563EB e rgb(37, 99, 235). Cada cor mostra quantas vezes aparece e como estava escrita, e o resultado pode ser copiado como lista ou como custom properties do CSS.

Exemplos

Encontrando e reutilizando cores a partir do código:

grep
grep -Eoh '#[0-9a-fA-F]{3,8}\b' src/**/*.css | sort | uniq -c | sort -rn
JavaScript
const hexes = css.match(/#[0-9a-f]{3,8}\b/gi) ?? [];
const unique = [...new Set(hexes.map((h) => h.toLowerCase()))];
Python
import re
from collections import Counter

Counter(m.lower() for m in re.findall(r"#[0-9a-fA-F]{3,8}\b", css))
CSS
:root {
  --color-1: #2563eb;
  --color-2: #ffffff;
}
.button { background: var(--color-1); }

Casos de uso

Auditar uma folha de estilos legada

Cole um CSS antigo para ver quantos cinzas e azuis quase iguais foram se acumulando, e quais são usados o bastante para serem mantidos.

Montar design tokens

Transforme as cores que um projeto já usa em variáveis CSS como primeiro passo para um sistema de tokens.

Pegar uma paleta emprestada

Copie o CSS de uma página pelas ferramentas de desenvolvedor do navegador e cole aqui para obter suas cores.

Revisar um pull request

Cole os estilos alterados para encontrar cores escritas à mão que deveriam ter usado uma variável existente.

Perguntas frequentes

Quais formatos de cor são detectados?
HEX com 3, 4, 6 ou 8 dígitos, rgb(), rgba(), hsl(), hsla(), lab(), lch(), oklab() e oklch() em qualquer parte do texto, e os 148 nomes de cor CSS quando aparecem no valor de uma declaração, como color: tomato.
Por que nomes de cor em classes não são detectados?
Palavras como red, tan ou navy aparecem em classes (text-red-500), comentários e texto muito mais vezes do que como cores reais. Os nomes só contam depois de dois-pontos, onde fica um valor CSS, e os comentários são ignorados.
Cores que parecem iguais são unificadas?
São unificadas as cores que produzem exatamente o mesmo valor, independentemente da grafia. As que são apenas parecidas ficam separadas; use a Calculadora Delta E para decidir se vale a pena unificar duas delas.
Posso colar uma URL em vez de código?
Não. Ler outro site exigiria um servidor, e esta ferramenta roda só no seu navegador. Abra o site, copie o CSS pelas ferramentas de desenvolvedor (aba Sources ou Network) e cole aqui.
Meus dados são enviados a algum servidor?
Não. O código é analisado no seu navegador com JavaScript puro. Nada do que você cola é transmitido ou armazenado.

Ferramentas relacionadas

Conversor de Cores (HEX, RGB, HSL, CMYK)Verificador de Contraste de Cores (WCAG AA / AAA)Gerador de Tonalidades (Tints e Shades)Gerador de Gradiente CSSGerador de Paleta de Cores (Harmonias)Seletor de Cor de Imagem