CSS-Farbvariablen-Generator
Markenfarben als CSS Custom Properties anlegen – mit Hover-, Active- und Textfarben sowie Abstufungen, Export als CSS, Tailwind oder SCSS.
Der CSS-Farbvariablen-Generator legt Markenfarben als CSS Custom Properties an. Zu jeder Farbe ergänzt er auf Wunsch Varianten für Hover, Active, einen hellen Hintergrundton und eine gut lesbare Textfarbe, optional auch Abstufungen von 50 bis 950. Export als CSS-Variablen, Tailwind-v4-Theme oder SCSS-Variablen in HEX, RGB, HSL oder OKLCH.
primary
primary-hover
primary-active
primary-subtle
primary-on
secondary
secondary-hover
secondary-active
secondary-subtle
secondary-on
success
success-hover
success-active
success-subtle
success-on
danger
danger-hover
danger-active
danger-subtle
danger-on
:root {
--color-primary: #2563eb;
--color-primary-hover: #124fd6;
--color-primary-active: #003bc0;
--color-primary-subtle: #ebf2ff;
--color-primary-on: #ffffff;
--color-secondary: #7c3aed;
--color-secondary-hover: #6c1fd8;
--color-secondary-active: #5b00bd;
--color-secondary-subtle: #f2f0ff;
--color-secondary-on: #ffffff;
--color-success: #16a34a;
--color-success-hover: #008f3d;
--color-success-active: #007a33;
--color-success-subtle: #e0fae4;
--color-success-on: #000000;
--color-danger: #dc2626;
--color-danger-hover: #c50012;
--color-danger-active: #a7000d;
--color-danger-subtle: #ffedeb;
--color-danger-on: #ffffff;
}Farben als Custom Properties
CSS Custom Properties sind Variablen, die der Browser zur Laufzeit auflöst. Definiert in :root, stehen sie auf der ganzen Seite zur Verfügung und lassen sich für Bereiche
oder Themes überschreiben.
| Variable | Einsatz |
|---|---|
--color-primary | Grundfarbe für Buttons und Links |
--color-primary-hover | :hover-Zustand |
--color-primary-active | Gedrückter Zustand |
--color-primary-subtle | Heller Hintergrund, z. B. für Hinweise |
--color-primary-on | Textfarbe auf der Grundfarbe |
Eine komplette Tailwind-Skala aus einer Farbe erzeugt der Tailwind-Farbgenerator, ein dunkles Theme der Dark-Mode-Generator. Typografie, Abstände und Radien als Tokens legst du im Design-Token-Generator an.
Häufige Fragen
Warum Farben als CSS-Variablen?
Eine Farbe wird an einer Stelle definiert und überall per var(--color-primary) verwendet. Änderst du sie, ändert sich die ganze Seite. Mit Variablen lassen sich auch Themes wie ein Dark Mode umsetzen, indem man nur die Werte austauscht.
Wie werden Hover und Active berechnet?
Im Farbraum OKLCH wird die Helligkeit um 6 bzw. 12 Prozentpunkte gesenkt, bei sehr dunklen Farben angehoben. Farbton und Sättigung bleiben erhalten, deshalb wirken die Varianten natürlicher als mit einfachem Abdunkeln in RGB.
Was ist die Variable -on?
Die Textfarbe, die auf der jeweiligen Farbe am besten lesbar ist, also Weiß oder Schwarz nach WCAG-Kontrast. So schreibst du Buttons wie background: var(--color-primary); color: var(--color-primary-on).
Stimmt etwas nicht auf dieser Seite? – wir schauen uns das an.