CSS-Variablen-Generator
Erstelle eine Farbtoken-Liste, prüfe jede Variable in der Vorschau und kopiere fertige CSS-Custom-Properties.
So funktioniert's
- Gib ein Präfix wie brand, theme oder ui ein.
- Bearbeite jeden Variablennamen und wähle eine Farbe.
- Füge bei Bedarf weitere Zeilen hinzu.
- Kopiere das generierte CSS in dein Stylesheet.
Farbvorschau
--brand-primary
--brand-secondary
--brand-accent
Generierte CSS-Variablen
:root {
--brand-primary: #4f46e5;
--brand-secondary: #06b6d4;
--brand-accent: #f59e0b;
}Farbsysteme mit CSS-Variablen sauber aufbauen
Erstelle :root-Farbtokens, reduziere Wiederholungen und vereinfache globale Farbänderungen in deinem Stylesheet.
Wann du dieses Tool nutzen solltest
- Du wiederholst dieselben Farbwerte in mehreren CSS-Dateien.
- Du willst globale Farbänderungen ohne fehleranfälliges Suchen/Ersetzen.
- Du brauchst ein schnelles Token-Grundset für eine kleine Website.
Kurze Schritte
- Lege ein klares Präfix wie brand oder theme fest.
- Benenne Variablen nach Rolle und setze HEX-Werte.
- Kopiere den erzeugten :root-Block.
- Füge ihn ins Stylesheet ein und ersetze wiederholte Hardcoded-Farben.
Häufige Fehler
- Variablen nur nach Farbe statt nach UI-Rolle benennen.
- Unterschiedliche Präfixe in verschiedenen Dateien nutzen.
- Für dieselben Elemente Variablen und Hardcoded-Werte mischen.
Passende CSS-Variablen-Guides
Lies kurze praxisnahe Guides für einen wartbaren CSS-Variablen-Workflow.