Que tipo de entrada aceita?

Qualquer texto contendo códigos hex — separados por espaços, vírgulas ou colados de uma folha de estilos. Texto que não seja cor é ignorado.

Suporta hex abreviado?

Sim. Hex de 3 dígitos como #abc é expandido para #AABBCC automaticamente.

Posso mudar os nomes das variáveis?

Defina um prefixo para controlar o nome base; números são adicionados automaticamente. Edite o resultado para nomes semânticos.

O que é a saída Tailwind?

Uma configuração module.exports com as cores sob theme.extend.colors, pronta para mesclar no tailwind.config.js.

Minhas cores são enviadas?

Não. Tudo é processado no seu navegador e nada sai do seu dispositivo.

Paleta para variáveis CSS

Cole as cores

Prefixo do nome da variável

Formato de saída

4 cores

Pré-visualização de cores

#1E293B

#0EA5E9

#10B981

#F43F5E

Variáveis CSS

:root {
  --color-1: #1E293B;
  --color-2: #0EA5E9;
  --color-3: #10B981;
  --color-4: #F43F5E;
}

Sites externos relacionados

Alguns links são links de afiliados.

Adobe ColorUma ferramenta online gratuita para criar e explorar paletas de cores e temas. Use a roda de cores para criar esquemas harmoniosos ou extraia cores de uma imagem. As paletas sincronizam diretamente com o Creative Cloud.CanvaUma popular plataforma de design com arrastar e soltar para criar posts em redes sociais, apresentações, pôsteres e mais. Oferece uma enorme biblioteca de modelos, fotos e gráficos gratuitos e premium. Não é necessária experiência em design.

Ferramentas relacionadas

Gerador de Paleta de CoresGere paletas de cores harmônicas a partir de um HEX base com esquemas complementar, análogo, triádico e mais. Trave cores, regenere o resto e exporte para CSS, Tailwind ou JSON.Gerador de GradienteCrie gradientes CSS lineares, radiais e cônicos com múltiplas paradas de cor. Ajuste ângulo, forma e centro, e copie o CSS de background ou o valor do Tailwind com um clique.Extrator de Cores de ImagemExtraia a paleta de cores dominantes de qualquer imagem no seu navegador, sem enviar nada. Obtenha HEX, RGB e porcentagem (%) de cada cor, escolha quantas cores e exporte como CSS/JSON.Ferramenta de combinação de fontesEncontre combinações curadas do Google Fonts para título e corpo, visualize em tempo real e copie o CSS com um clique.

Cole uma paleta — ou qualquer texto que contenha códigos hex — e esta ferramenta extrai as cores e as escreve como propriedades personalizadas CSS, variáveis SCSS ou uma configuração de cores Tailwind. Duplicatas são removidas e cada cor recebe um nome numerado. Tudo acontece no seu navegador.

Como usar

Cole cores hex (ou texto que as contenha) na caixa.
Defina um prefixo de nome e escolha a saída CSS, SCSS ou Tailwind.
Copie o código gerado para sua folha de estilos ou configuração.

Como funciona

A ferramenta varre o texto em busca de códigos hex (3 ou 6 dígitos, com ou sem #), normaliza para o formato maiúsculas de 6 dígitos e remove duplicatas mantendo a ordem de aparição. Cada cor se torna uma variável numerada com o seu prefixo, formatada para a saída escolhida: propriedades :root CSS, $variáveis SCSS ou um objeto theme.extend.colors do Tailwind.

Funcionalidades

Extração inteligente

Encontra códigos hex em qualquer texto colado e ignora o resto.

Três formatos

Gera propriedades CSS personalizadas, variáveis SCSS ou uma configuração Tailwind.

Sem duplicatas

Cores repetidas são mescladas para que cada variável seja única.

Totalmente privado

As cores são processadas no seu navegador e nunca enviadas.

Quando usar

Entrega de design

Converta rapidamente uma paleta de uma ferramenta de design em tokens de código.

Temas

Crie um conjunto de variáveis CSS para o tema de um site.

Projetos Tailwind

Adicione as cores da marca diretamente à sua configuração Tailwind.

Guias de estilo

Documente um sistema de cores com nomes de variáveis consistentes.

Observações

#RGB e #RRGGBB são aceitos e normalizados.
As cores mantêm a ordem da primeira aparição; duplicatas são removidas.
Renomeie as variáveis após colar se preferir nomes semânticos.
Todo o processamento ocorre no seu dispositivo; nada é enviado.

Perguntas frequentes

Que tipo de entrada aceita?: Qualquer texto contendo códigos hex — separados por espaços, vírgulas ou colados de uma folha de estilos. Texto que não seja cor é ignorado.
Suporta hex abreviado?: Sim. Hex de 3 dígitos como #abc é expandido para #AABBCC automaticamente.
Posso mudar os nomes das variáveis?: Defina um prefixo para controlar o nome base; números são adicionados automaticamente. Edite o resultado para nomes semânticos.
O que é a saída Tailwind?: Uma configuração module.exports com as cores sob theme.extend.colors, pronta para mesclar no tailwind.config.js.
Minhas cores são enviadas?: Não. Tudo é processado no seu navegador e nada sai do seu dispositivo.