HEX → CSS Tokens
Monte variáveis CSS e tokens Tailwind a partir de paletas HEX.
Saída
:root {
--brand-color-1: #0ea5e9;
--brand-color-2: #22d3ee;
--brand-color-3: #f97316;
--brand-color-4: #fde047;
--brand-color-5: #1e293b;
}Tokens da paleta
| Cor | Nome do token | Texto recomendado | Variantes |
|---|---|---|---|
#0EA5E9Amostra #1 | Slug: color-1 | Texto preto Contraste 7.58:1 vs texto | Clarear #41BCF4Escurecer #0A75A6 |
#22D3EEAmostra #2 | Slug: color-2 | Texto preto Contraste 11.62:1 vs texto | Clarear #5BDEF2Escurecer #0EA4BA |
#F97316Amostra #3 | Slug: color-3 | Texto preto Contraste 7.49:1 vs texto | Clarear #FB9752Escurecer #C35305 |
#FDE047Amostra #4 | Slug: color-4 | Texto preto Contraste 15.93:1 vs texto | Clarear #FEEA84Escurecer #FAD203 |
#1E293BAmostra #5 | Slug: color-5 | Texto branco Contraste 14.63:1 vs texto | Clarear #334564Escurecer #06080C |
Dicas
- Nomeie tokens com papéis semânticos (principal, destaque) em vez de números.
- Verifique contraste para estados e modos antes de mesclar paletas.
- Guarde o trecho no controle de versão para acompanhar mudanças na paleta.
Visão geral
Converta listas de cores HEX em propriedades personalizadas CSS, mapas SCSS e trechos de tema Tailwind reutilizáveis.
Como usar
- Cole valores HEX, CSS, JSON ou configurações do Tailwind.
- Renomeie tokens para papéis semânticos (principal, destaque etc.).
- Copie a saída em CSS/SCSS/Tailwind para o seu design system.
Casos de uso
- Conectar paletas de marca entre design e código.
- Iniciar cores de tema Tailwind a partir de style guides.
- Gerar variáveis CSS para Storybook ou bibliotecas de componentes.
Dicas e conhecimento
- Mantenha a nomenclatura consistente entre tokens de design e bases de código.
- Cheque contraste de texto/fundo em cada combinação de modo.
- Armazene os trechos no controle de versão para acompanhar mudanças na paleta.