🎨Extrator de códigos de cor
Cole um CSS ou qualquer texto e veja todas as cores encontradas, em HEX, rgb ou hsl, cada uma com sua amostra e convertida para HEX, sem repetições.
Processamento 100% local: seu código não sai do navegador.
🔒 Cálculo 100% local — os dados que você digita não saem do seu navegador, nada é enviado a servidores.
Fonte: CSS Color Module (especificação W3C) — notações HEX, rgb() e hsl(); extração e conversão locais no navegador · Última verificação em 24/09/2026
O extrator varre o texto atrás de cores HEX de 3, 4, 6 ou 8 dígitos, de funções rgb() ou rgba() e de hsl() ou hsla(). Cada cor é convertida para HEX de 6 dígitos, ou 8 quando há transparência, e mostrada com uma amostra. Repetidos são removidos se você quiser, e tudo roda no navegador.
Como usar o extrator
- Cole o CSS ou o textoPode ser uma folha de estilos inteira, um trecho de código, um documento de design ou um e-mail. Só as cores são extraídas.
- Confira as amostrasCada cor aparece com um quadradinho colorido, o código HEX convertido e, quando veio de rgb ou hsl, o texto original.
- Copie a listaDeixe marcada a opção de cores únicas para remover repetidas, e copie a lista de HEX, um código por linha.
Como funciona
Em CSS uma cor pode ser escrita de várias formas. O HEX usa # seguido de 3, 4, 6 ou 8 dígitos hexadecimais: as formas curtas, como #fff, repetem cada dígito, e a de 4 ou 8 dígitos inclui o canal alfa, a transparência. O rgb(r, g, b) usa três números de 0 a 255, ou percentuais, e o rgba() acrescenta a opacidade. O hsl(h, s%, l%) descreve matiz em graus, saturação e luminosidade.
O extrator localiza cada notação com expressões regulares, converte para o mesmo padrão e normaliza para HEX em maiúsculas: #fff vira #FFFFFF. Para hsl, converte primeiro para RGB pela fórmula padrão, calculando o croma, um valor intermediário e um deslocamento de luminosidade. Quando há opacidade menor que 1, o resultado ganha um par extra de dígitos, o canal alfa em hexadecimal, formando um HEX de 8 dígitos.
Exemplo resolvido
Em um CSS com color: #fff, background: #1e3a8a, border: rgb(34, 197, 94) e background: rgba(0, 0, 0, 0.5), o extrator encontra quatro cores: #FFFFFF, #1E3A8A, #22C55E e #00000080. Este último tem oito dígitos porque 0,5 de opacidade equivale ao valor 128, ou 80 em hexadecimal.
Se #1e3a8a aparecer duas vezes no arquivo, a lista de únicos mostra a cor apenas uma vez, mas o resumo informa quantas ocorrências foram encontradas ao todo. Uma cor em hsl, como hsl(210, 80%, 45%), é convertida para o HEX equivalente e aparece com a amostra ao lado, o que ajuda a conferir visualmente se é a cor esperada.
Alguns usos: levantar a paleta de um tema ou de um site antigo antes de um redesign, encontrar cores duplicadas em várias folhas de estilo, montar uma lista de cores para enviar a um designer, migrar cores escritas em rgb ou hsl para o padrão HEX de um projeto e conferir quais tons um trecho de código realmente usa. Também é útil para extrair cores de documentos de marca copiados em texto.
Suposições e limitações
- São reconhecidos HEX de 3, 4, 6 e 8 dígitos, rgb(), rgba(), hsl() e hsla(), inclusive com espaços ou barra na sintaxe moderna
- Cores nomeadas, como red e blue, e variáveis CSS, como var(--cor), não são extraídas
- Cores em outros espaços, como oklch, lab e color(), também não são reconhecidas
- A conversão de hsl para HEX arredonda os canais para inteiros, então pode haver diferença mínima em relação a outras ferramentas
Dicas para tirar o melhor proveito
Use a extração para fazer um inventário das cores de um site: cole o CSS e veja de uma vez a paleta real em uso, com as repetições removidas. Muitas cores muito parecidas indicam falta de padronização, e você pode substituí-las por poucas variáveis. Para checar acessibilidade, leve os códigos do resultado a uma ferramenta de contraste.
O processamento é 100% local: o CSS e qualquer conteúdo colado não são enviados a servidores, o que é útil para projetos ainda não publicados. Se quiser converter uma única cor entre formatos, o conversor de cores do site é mais direto.
Para uma auditoria completa, extraia as cores de cada arquivo e junte as listas. Depois, agrupe as parecidas: se você encontra #1E3A8A, #1E3A8B e #1D3A8A no mesmo projeto, provavelmente é a mesma cor com pequenos erros de digitação, e vale consolidar em uma variável. As amostras ajudam a perceber essas diferenças visualmente.
Erros comuns a evitar
O erro mais comum é esperar que cores nomeadas ou variáveis CSS apareçam: a ferramenta só reconhece os formatos numéricos. Outro é confundir códigos que parecem HEX, como um identificador #abc12 de cinco dígitos, com cores válidas: só 3, 4, 6 e 8 dígitos são cores, e os demais são ignorados.
Também é comum esquecer que um HEX de 8 dígitos, como #00000080, inclui transparência, e colar em um lugar que só aceita 6 dígitos, perdendo a opacidade. Nesses casos, aplique a transparência à parte, por exemplo pela propriedade opacity.
Fique atento também aos códigos com transparência: eles serão listados como cores diferentes das versões opacas, mesmo que o RGB seja igual, porque o HEX de 8 dígitos tem o canal alfa. Se quiser tratá-los como a mesma cor, compare apenas os seis primeiros dígitos.
Veja também
Se esta ferramenta foi útil, você também pode precisar destas relacionadas: Gerador de gradiente CSS, Conversor de cores (HEX, RGB, HSL), Verificador de contraste de cores, Gerador de paleta de cores.
Ferramentas relacionadas
🎨Gerador de gradiente CSS
Escolha as cores e a direção, veja o preview ao vivo e copie o código CSS pronto.
Abrir ferramenta →🌈Conversor de cores (HEX, RGB, HSL)
Digite ou escolha uma cor e veja HEX, RGB e HSL sincronizados na hora.
Abrir ferramenta →🎨Verificador de contraste de cores
Calcule a razão de contraste entre texto e fundo e veja se passa no WCAG AA e AAA.
Abrir ferramenta →🎨Gerador de paleta de cores
Gere 5 cores harmônicas a partir de uma cor base: complementar, análoga, triádica ou monocromática.
Abrir ferramenta →Perguntas frequentes
Como extrair as cores de um CSS?
Cole o CSS na caixa e o extrator lista todas as cores HEX, rgb e hsl encontradas, cada uma com uma amostra e o HEX equivalente. Ative somente únicas para remover repetidas e copie a lista.
Quais formatos de cor são reconhecidos?
HEX de 3, 4, 6 e 8 dígitos, rgb() e rgba(), hsl() e hsla(). Cores nomeadas, variáveis CSS e formatos modernos como oklch não são extraídos.
O que significa um HEX de 8 dígitos?
Os seis primeiros dígitos são a cor, em vermelho, verde e azul, e os dois últimos são o canal alfa, a opacidade, de 00 (transparente) a FF (opaco). Por exemplo, 80 equivale a cerca de 50%.
Como o hsl é convertido para HEX?
A ferramenta converte matiz, saturação e luminosidade para RGB pela fórmula padrão do CSS e depois escreve cada canal em hexadecimal. Os valores são arredondados para inteiros de 0 a 255.
Meu CSS é enviado para algum servidor?
Não. A extração é feita 100% no navegador com JavaScript, e nada do que você cola é transmitido ou armazenado.
Explore mais ferramentas gratuitas
Dezenas de calculadoras, conversores e geradores — todos funcionam no navegador, sem cadastro e sem instalar nada.