CSS-Farbvariablen-Generator
Generiere CSS Custom Properties und Design Tokens aus einer Farbpalette.
Was diese Seite abdeckt
Diese Seite erklärt den Ablauf und verlinkt direkt auf den passenden Bereich des Chromoforge-Haupttools.
- Generiere Paletten aus einer Basisfarbe.
- Prüfe Kontrast vor dem Veröffentlichen von UI-Text.
- Exportiere CSS, Tailwind, SCSS, JSON, SVG und PNG.
- Läuft lokal im Browser.
Wie es funktioniert
CSS Custom Properties (auch CSS-Variablen genannt) erlauben es, alle Farben eines Projekts zentral zu definieren und überall mit der Syntax var(--variablenname) wiederzuverwenden. Chromoforge generiert diesen Variablenblock aus deiner Palette.
Der Arbeitsablauf ist einfach: Generiere oder importiere deine Palette in Chromoforge, gib jeder Farbrolle einen Namen (Primärfarbe, Sekundärfarbe, Oberfläche, Text, Rahmen...) und exportiere. Das Ergebnis ist ein fertiger :root { }-Block zum Einfügen in deine globale CSS-Datei:
- Automatische semantische Benennung:
--color-primary-500,--color-text-defaultusw. - Dark-Mode-Unterstützung: Chromoforge kann zwei Variablensets (helles/dunkles Theme) im selben Export generieren.
- Mehrere Formate: Hexadezimal, getrenntes RGB (für Opazitäts-Utilitys), HSL und oklch.
- Kompatibel mit allen Frameworks: React, Vue, Angular, Svelte oder reines CSS.
Du kannst auch im SCSS-Format exportieren ($variable: wert;) oder als Design-Token-JSON für Tools wie Style Dictionary oder Theo.
Praktische Beispiele
CSS-Farbvariablen sind die Grundlage jedes modernen Design Systems:
- Team-Design-System: Definiere
--color-brand-600einmal, und das gesamte Team verwendet es. Eine Farbänderung erfordert nur eine Zeile. - Nativer Dark Mode: Mit
@media (prefers-color-scheme: dark)überschreibe deine Variablen für den dunklen Modus ohne CSS-Regeln zu duplizieren. - Dynamische Thematisierung: Mit JavaScript kannst du CSS-Variablen zur Laufzeit ändern, um benutzerdefinierbare Themes anzubieten.
- Migration von SCSS: Ersetze Sass-Variablen durch native Custom Properties und profitiere von CSS-Kaskade und Vererbung.
FAQ — CSS-Farbvariablen
Was ist der Unterschied zwischen CSS Custom Properties und SCSS-Variablen?
SCSS-Variablen werden zur Kompilierzeit verarbeitet: Sie existieren nicht mehr im finalen CSS und können nicht per JavaScript geändert werden. CSS Custom Properties existieren im Browser, werden über die Kaskade vererbt und können zur Laufzeit mit element.style.setProperty() gelesen und geändert werden. Für moderne Projekte sind Custom Properties generell vorzuziehen.
Wie strukturiert man Variablennamen für ein großes Projekt?
Eine gängige Konvention ist --[namespace]-[kategorie]-[nuance], z.B. --ds-color-primary-600. Trenne rohe Farben (numerische Skala) von semantischen Farben (Rollen wie --color-text-muted). Chromoforge unterstützt beide Ebenen im selben Export.
Kann ich die generierten Variablen mit Tailwinds Opazitäts-Utilitys verwenden?
Ja, aber Tailwind benötigt getrennte RGB-Komponenten. Exportiere deine Farben im Format "getrenntes RGB" (--color-primary-500: 30 64 175;) und verwende die Tailwind-Syntax bg-[rgb(var(--color-primary-500)/50%)] oder konfiguriere tailwind.config.js entsprechend.