Farbe zu CSS-Variablen

Hex-Farben in CSS-benutzerdefinierte Eigenschaften mit Namenskonventionen konvertieren

Was ist das und wie funktioniert es?

Das Konvertieren von Farben zu CSS Custom Properties (Variablen) ist ein zentraler Workflow bei der Entwicklung von Design-Systemen. Statt Farbwerte überall im CSS hardzukodieren, definiert man sie einmal als `--farbe-primär: #1DA1F2` im `:root`-Selektor.

Dieses Tool nimmt eine Liste von Farbwerten mit ihren Namen und generiert CSS Custom Property-Deklarationen und Sass/SCSS-Äquivalente — fertig zum Einfügen in die Design-Token-Datei.

Anwendungsfälle

• Design-System-Bootstrap: Markenpalette einfügen und CSS Custom Properties-Block für die Design-Tokens-Datei oder Tailwind-Konfiguration generieren.
• Theme-Wechsel: Helle und dunkle Theme-Farben als separate Custom Property-Sets definieren — zwischen Themes durch Tauschen des `:root`-Blocks wechseln.
• Sass-Migration: Legacy-Sass-Variablen zu CSS Custom Properties für modernes Browser-Theming exportieren.

Häufige Fragen

Was ist der Unterschied zwischen CSS Custom Properties und Sass-Variablen?

Sass-Variablen werden zur Kompilierzeit aufgelöst. CSS Custom Properties werden zur Laufzeit im Browser aufgelöst — können dynamisch mit JavaScript geändert werden und haben Element-Scope.

Welche Namenskonvention für Farbvariablen verwenden?

Häufige Muster: semantische Namen (`--farbe-primär`), skalenbasierte Namen (`--blau-100` bis `--blau-900`), oder beides.

Können CSS Custom Properties in Media Queries verwendet werden?

Teilweise. Sie funktionieren innerhalb von Media Query-Körpern, aber nicht in den Bedingungen selbst.

Wie werden Custom Properties vererbt und überschrieben?

Sie kaskadieren wie reguläre Eigenschaften. Überschreiben für ein bestimmtes Element: `.karte { --farbe-primär: #FF0000; }` ändert den Wert nur innerhalb von `.karte`.

Entwickler

UUID-Generator · Zeitstempel-Konverter · Base64-Encoder · Base64-Decoder · Hash-Generator · Farb-Konverter