HEX → CSS Tokens
Build CSS variables and Tailwind tokens from HEX palettes.
Output
:root {
--brand-color-1: #0ea5e9;
--brand-color-2: #22d3ee;
--brand-color-3: #f97316;
--brand-color-4: #fde047;
--brand-color-5: #1e293b;
}Palette tokens
| Color | Token name | Recommended text | Variants |
|---|---|---|---|
#0EA5E9Swatch #1 | Slug: color-1 | Black text Contrast 7.58:1 vs text | Lighten #41BCF4Darken #0A75A6 |
#22D3EESwatch #2 | Slug: color-2 | Black text Contrast 11.62:1 vs text | Lighten #5BDEF2Darken #0EA4BA |
#F97316Swatch #3 | Slug: color-3 | Black text Contrast 7.49:1 vs text | Lighten #FB9752Darken #C35305 |
#FDE047Swatch #4 | Slug: color-4 | Black text Contrast 15.93:1 vs text | Lighten #FEEA84Darken #FAD203 |
#1E293BSwatch #5 | Slug: color-5 | White text Contrast 14.63:1 vs text | Lighten #334564Darken #06080C |
Tips
- Name tokens with semantic roles (primary, accent) instead of numbers.
- Verify contrast for states and modes before merging palettes.
- Store generated code in version control to track palette changes.
Aperçu
Convertissez des listes HEX en variables CSS réutilisables, cartes SCSS et extraits Tailwind.
Utilisation
- Coller les valeurs HEX, CSS ou JSON existantes.
- Renommer les tokens avec des rôles sémantiques (primaire, accent, etc.).
- Copier le CSS/SCSS/Tailwind généré.
Cas d'usage
- Aligner la palette design et le code.
- Initialiser la configuration Tailwind à partir d'un guide de style.
- Créer des variables CSS pour Storybook ou une librairie de composants.
Conseils & connaissances
- Conserver une nomenclature cohérente entre design et code.
- Vérifier le contraste texte/fond pour chaque mode.
- Versionner les snippets générés pour suivre l'évolution des palettes.