Web / CSS

Farbpaletten-Generator

Erstelle konsistente CSS-Variablen für Farben, Abstände, Schriftgrößen und Layoutbreiten. Das Ergebnis kann direkt als :root-Block in eine CSS-Datei übernommen werden.

Palette konfigurieren

Wähle eine Basisfarbe, ein Palettenmodell und ergänze typische Designsystem-Werte für Layout, Spacing und Typografie.

Zusätzliche Variablen

Vorschau

Noch keine Palette erstellt.

Design-Vorschau

Beispielkarte

Diese Vorschau zeigt Text, Fläche, Rahmen und Aktionsfarbe mit der erzeugten Palette.

Kontrast Primär/Text -
Kontrast Fläche/Text -

CSS-Ausgabe

Der erzeugte Block kann direkt in eine CSS-Datei kopiert oder als Datei heruntergeladen werden.

Warum CSS-Variablen sinnvoll sind

Farben, Abstände und Schriftgrößen werden an einer Stelle gepflegt. Dadurch bleiben Webseiten konsistenter, und spätere Designänderungen lassen sich schneller durchführen.

Praktischer Einsatz

Der erzeugte :root-Block eignet sich als Startpunkt für kleine Webseiten, Prototypen, Dokumentationen und wiederverwendbare Komponenten.