CSS-Variablen-Generator

Stellen Sie eine Liste benannter Farben zusammen und erhalten Sie sofort den passenden :root { --nom: valeur; }-Block mit CSS-Variablen (Custom Properties). Verarbeitung 100% lokal in Ihrem Browser – nichts wird an einen Server gesendet.

CSS-Code

So funktioniert es

CSS-Variablen (auch „Custom Properties“ genannt) bündeln die Farben eines Designs an einer einzigen Stelle. So müssen Sie nicht denselben Hex-Code in Dutzenden Dateien wiederholen, und ein späterer Theme-Wechsel (auch zu einem Dark Mode) wird einfacher. Fügen Sie Zeilen hinzu oder entfernen Sie sie, passen Sie jede Farbe an, und der :root-Block wird in Echtzeit aktualisiert – bereit zum Einfügen am Anfang Ihres Haupt-Stylesheets.

Werden ungültige Variablennamen automatisch korrigiert?

Ja: Leerzeichen und nicht erlaubte Zeichen werden durch Bindestriche ersetzt, und der Name wird kleingeschrieben, um der üblichen CSS-Konvention zu entsprechen. Enden zwei Variablen mit demselben Namen, wird automatisch ein numerisches Suffix angehängt, um Konflikte zu vermeiden.

Kann ich als Wert etwas anderes als Farben verwenden?

Ja, das Feld „Wert“ akzeptiert jeden gültigen CSS-Wert (eine Größe in rem, eine Schriftart, einen Verlauf …), auch wenn die danebenstehende Farbauswahl nützlich bleibt, um schnell eine Palette zusammenzustellen.

Datenschutz: Die von Ihnen zusammengestellte Palette bleibt vollständig in Ihrem Browser, nichts wird an einen Server gesendet oder dort gespeichert.