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.
Überblick
Konvertiert HEX-Farblisten in wiederverwendbare CSS-Custom-Properties, SCSS-Maps und Tailwind-Theme-Snippets.
Anleitung
- HEX-Werte, CSS, JSON oder Tailwind-Konfiguration einfügen.
- Tokens auf semantische Rollen (primary, accent etc.) umbenennen.
- CSS/SCSS/Tailwind-Ausgabe für das Designsystem kopieren.
Anwendungsfälle
- Markenpaletten zwischen Design und Code angleichen.
- Tailwind-Themes auf Basis eines Styleguides aufsetzen.
- CSS-Variablen für Storybook oder Komponentenbibliotheken erzeugen.
Tipps & Wissen
- Benennungen über Design-Tokens und Code hinweg einheitlich halten.
- Kontrast von Text/Hintergrund in allen Varianten prüfen.
- Snippets im Versionskontrollsystem speichern, um Palettenänderungen nachzuvollziehen.