Farbpalette zu CSS-Variablen

• Mehrere Ausgabeformate: Unser Konverter für Farbpalette zu CSS-Variablen unterstützt vier Ausgabeformate: HEX (#rrggbb), RGB (rgb(r, g, b)), HSL (hsl(h, s%, l%)) und "Alle Formate", das HEX, RGB, HSL und einzelne R/G/B-Kanalvariablen in einem einzigen Block generiert - perfekt zum Zusammensetzen von rgba()-Werten.
• Sofortige CSS-Variablengenerierung: Geben Sie Ihre Farbnamen und Hex-Werte ein, wählen Sie Selektor und Format und klicken Sie auf "Generieren", um sofort einfügebereite CSS-Custom-Property-Deklarationen zu erhalten. Unser Konverter unterstützt auch Masseneinfügen - mehrere Farben auf einmal im Format Name: #hex.
• Sichere Farbpalette zu CSS-Variablen online: Die gesamte Konvertierung läuft vollständig in Ihrem Browser. Ihre Farbwerte und Variablennamen werden niemals an einen Server gesendet, wenn Sie unseren Online-Konverter nutzen - 100 % privat, funktioniert nach dem Laden vollständig offline.
• Farbpalette zu CSS-Variablen - ohne Installation: Nutzen Sie unseren kostenlosen Konverter direkt in Ihrem Browser, ohne Downloads, ohne Erweiterungen und ohne Konto. Unterstützt benutzerdefinierte Selektoren, Variablenpräfixe und Masseneingabe von Farben für Designsystem-Workflows.

• Generierung von Designsystem-Tokens: Wandeln Sie die Farbpalette Ihrer Marke in CSS-Custom-Properties für ein Designsystem um. Nutzen Sie unseren Konverter für Farbpalette zu CSS-Variablen, um alle Farb-Tokens mit einem Klick zu generieren und sie in Ihr globales Stylesheet oder Ihre Design-Token-Datei einzufügen.
• Tailwind-CSS-Theme-Erweiterung: Generieren Sie CSS-Variablen aus Ihren Markenfarben und referenzieren Sie sie in Ihrer Tailwind-Konfiguration mit var(--farbname). Unser Konverter macht es einfach, Ihre Designpalette mit dem Theme-System von Tailwind zu verbinden.
• Dark-Mode-Theme-Wechsel: Definieren Sie Farbpaletten für Light- und Dark-Mode als CSS-Variablen unter verschiedenen Selektoren (.light, .dark oder [data-theme]). Nutzen Sie unseren Konverter mit der Option für benutzerdefinierte Selektoren, um beide Theme-Blöcke zu generieren.
• Dokumentation der Markenfarben: Wandeln Sie die Hex-Farbpalette eines Brand-Styleguides in CSS-Variablen für die Entwicklerübergabe um. Unser Konverter generiert saubere, benannte Variablen, die den Namenskonventionen des Designteams entsprechen.
• Theming von Komponentenbibliotheken: Generieren Sie CSS-Custom-Properties für die Farb-Tokens einer Komponentenbibliothek. Nutzen Sie die Option für Variablenpräfixe in unserem Konverter, um Namensräume zu erstellen (z. B. --brand-color-primary) und Konflikte zu vermeiden.
• RGBA-Komposition mit Kanalvariablen: Nutzen Sie die Ausgabe "Alle Formate", um einzelne R-, G- und B-Kanalvariablen zusammen mit der vollständigen Farbe zu generieren. So können Sie rgba()-Werte mit dynamischer Deckkraft zusammensetzen: rgba(var(--color-primary-r), var(--color-primary-g), var(--color-primary-b), 0.5).

Ein Konverter für Farbpalette zu CSS-Variablen ist ein Tool, das eine Liste von Hex-Farbwerten in CSS-Custom-Property-Deklarationen umwandelt - auch bekannt als CSS-Variablen. CSS-Custom-Properties werden mit einem Doppelstrich-Präfix definiert (z. B. --color-primary: #3b82f6 ) und können überall in Ihrem Stylesheet mit var(--color-primary) referenziert werden. Unser Konverter für Farbpalette zu CSS-Variablen unterstützt HEX-, RGB-, HSL- und kombinierte Ausgabeformate mit konfigurierbaren Selektoren und Variablenpräfixen für Designsystem-Workflows.

1. Farben eingeben: Fügen Sie Farben einzeln über die Farbauswahl und das Hex-Feld hinzu, oder nutzen Sie die Masseneinfügefunktion, um mehrere Farben auf einmal im Format Name: #hex einzugeben. Jede Farbe erhält einen Variablennamen, der zum Namen der CSS-Custom-Property wird.
2. Ausgabeoptionen konfigurieren: Wählen Sie Ihr Ausgabeformat (HEX, RGB, HSL oder alle Formate), Ihren CSS-Selektor (:root, .theme oder benutzerdefiniert) und ein optionales Variablenpräfix. Die gesamte Konfiguration läuft lokal in Ihrem Browser - Ihre Farbwerte verlassen niemals Ihr Gerät.
3. CSS kopieren oder herunterladen: Klicken Sie auf "CSS-Variablen generieren", um den vollständigen CSS-Block zu erzeugen. Kopieren Sie ihn in die Zwischenablage oder laden Sie ihn als .css-Datei herunter, bereit zum Import in Ihr Projekt.

• HEX-Variablen: Standard-Hex-Farbwerte (z. B. --color-primary: #3b82f6 ). Kompatibel mit allen Browsern und das kompakteste Format für Farb-Tokens.
• RGB-Variablen: RGB-Funktionsnotation (z. B. --color-primary: rgb(59, 130, 246) ). Nützlich, wenn Sie Deckkraft mit rgba() auf eine feste Farbe anwenden möchten.
• HSL-Variablen: HSL-Funktionsnotation (z. B. --color-primary: hsl(217, 91%, 60%) ). Von vielen Designsystemen bevorzugt, weil Farbton, Sättigung und Helligkeit unabhängig angepasst werden können.
• Kanalvariablen (Format "Alle"): einzelne R-, G- und B-Kanalwerte (z. B. --color-primary-r: 59 ), mit denen Sie rgba() mit dynamischer Deckkraft zusammensetzen können: rgba(var(--color-primary-r), var(--color-primary-g), var(--color-primary-b), 0.5) .

CSS-Custom-Properties sind case-sensitiv - --Color-Primary und --color-primary sind verschiedene Variablen. Unser Konverter für Farbpalette zu CSS-Variablen wandelt Variablennamen automatisch in kleingeschriebenes Kebab-Case um, um den CSS-Namenskonventionen zu folgen. In :root definierte Variablen sind global verfügbar. In einem Klassenselektor definierte Variablen (z. B. .dark ) gelten nur, wenn diese Klasse an einem Vorfahrenelement vorhanden ist - nützlich für den Theme-Wechsel.