CSS-Variablen-Generator für Farben und Abstände

Custom Properties für Farben und Abstände

Der CSS-Variablen Generator legt das Grundgerüst eines kleinen Design-Systems an: Aus drei Grundfarben entstehen je elf Abstufungen von 50 (sehr hell) bis 950 (sehr dunkel), dazu eine Reihe von Abständen und Eckenradien. Die Werte erscheinen als CSS Custom Properties im Block :root, etwa --primary-500 oder --space-4, und lassen sich überall mit var(--primary-500) verwenden. So steht jede Farbe und jeder Abstand an genau einer Stelle und lässt sich zentral ändern.

Die Abstufungen berechnet das Werkzeug im Farbraum OKLCH, der die wahrgenommene Helligkeit gleichmäßiger abbildet als HSL. Ihre Grundfarbe bleibt als Stufe 500 erhalten, hellere Stufen werden heller und weniger gesättigt, dunklere dunkler. Farben außerhalb des sRGB-Bereichs werden behutsam entsättigt. Zu jeder Farbpalette gibt es eine Variable --primary-contrast mit Schwarz oder Weiß, je nachdem, was auf Stufe 500 besser lesbar ist. Der Dunkelmodus-Block kehrt die neutrale Skala per prefers-color-scheme: dark um, damit Hintergründe dunkel und Texte hell werden.

Neben CSS gibt das Werkzeug SCSS-Variablen oder JSON im Format der Design Tokens Community Group aus, das Werkzeuge wie Style Dictionary verarbeiten. Abstände entstehen entweder als Vielfache einer Basis (4 px ergibt 4, 8, 12, 16 …) oder als Größen von xs bis 3xl. Prüfen Sie Text- und Hintergrundfarben vor dem Einsatz mit dem Kontrastprüfer, passende Zweitfarben liefern die Farbharmonien.