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 Chromaforge-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 uberall mit der Syntax var(--variablenname) wiederzuverwenden. Chromaforge generiert diesen Variablenblock aus deiner Palette.
Der Arbeitsablauf ist einfach: Generiere oder importiere deine Palette in Chromaforge, gib jeder Farbrolle einen Namen (Primarfarbe, Sekundarfarbe, Oberflache, Text, Rahmen...) und exportiere. Das Ergebnis ist ein fertiger :root { }-Block zum Einfugen in deine globale CSS-Datei:
- Automatische semantische Benennung:
--color-primary-500,--color-text-defaultusw. - Dark-Mode-Unterstutzung: Chromaforge kann zwei Variablensets (helles/dunkles Theme) im selben Export generieren.
- Mehrere Formate: Hexadezimal, getrenntes RGB (für Opazitats-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 Farbandererung erfordert nur eine Zeile. - Nativer Dark Mode: Mit
@media (prefers-color-scheme: dark)uberschreibe deine Variablen für den dunklen Modus ohne CSS-Regeln zu duplizieren. - Dynamische Thematisierung: Mit JavaScript kannst du CSS-Variablen zur Laufzeit andern, 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 konnen nicht per JavaScript geandert werden. CSS Custom Properties existieren im Browser, werden uber die Kaskade vererbt und konnen zur Laufzeit mit element.style.setProperty() gelesen und geandert werden. Für moderne Projekte sind Custom Properties generell vorzuziehen.
Wie strukturiert man Variablennamen für ein grosses Projekt?
Eine gangige Konvention ist --[namespace]-[kategorie]-[nuance], z.B. --ds-color-primary-600. Trenne rohe Farben (numerische Skala) von semantischen Farben (Rollen wie --color-text-muted). Chromaforge unterstutzt beide Ebenen im selben Export.
Kann ich die generierten Variablen mit Tailwinds Opazitats-Utilitys verwenden?
Ja, aber Tailwind benotigt 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.
Ist der JSON-Export mit Style Dictionary kompatibel?
Der JSON-Export von Chromaforge folgt der Struktur der W3C Design Tokens Community Group. Er ist mit Style Dictionary 4+ kompatibel, das dieses Format nativ unterstutzt. Damit kannst du deine Tokens einmal transformieren und für iOS, Android, CSS und andere Plattformen exportieren.