Farbe zu CSS-Variablen-Generator Wandeln Sie eine Farbauswahl in benutzerdefinierte CSS-Eigenschaften (Variablen) um.

🎨

Farbe zu CSS-Variablen

Wandeln Sie eine Farbauswahl in benutzerdefinierte CSS-Eigenschaften (Variablen) um.

Farben hinzufügen

Fügen Sie Farben mit benutzerdefinierten Variablenamen mithilfe von Farbauswahlfeldern hinzu.

Format auswählen

Wählen Sie das Ausgabeformat: HEX, RGB oder HSL.

CSS kopieren

Kopieren Sie den generierten :root-CSS-Block mit benutzerdefinierten Eigenschaften.

Loading tool...

What Is Farbe zu CSS-Variablen?

Der Color-to-CSS-Variables-Generator wandelt eine Sammlung benannter Farben in CSS-Eigenschaften (:root-Variablen) um, die Sie direkt in Ihre Stylesheets einfügen können. Sie können beliebig viele Farben hinzufügen, jeder einen semantischen Variablennamen geben (wie "primär", "sekundär", "Akzent"), und das Ausgabeformat wählen: HEX für Einfachheit, RGB durch Komma getrennt für rgba()-Flexibilität oder HSL durch Komma getrennt für einfache Laufzeitmanipulation. CSS-Eigenschaften sind die Grundlage moderner Themensysteme und ermöglichen dunkle Modus, Marken-Themen und dynamische Farbaktualisierungen. Dieses Tool generiert den Boilerplate-Code :root { --variable: Wert; }, damit Sie Ihr Farbsystem schnell einrichten können. Die Live-Vorschau zeigt alle Ihre Farben zusammen als Palette-Streifen.

Why Use Farbe zu CSS-Variablen?

Unbegrenzte Farben mit benutzerdefinierten Variablenamen hinzufügen
Drei Ausgabeformate: HEX, RGB oder HSL
Erzeugt einen sauberen :root { }-CSS-Block
Live-Vorschau der Farbpalette
Basis für CSS-Theming-Systeme

Common Use Cases

CSS-Theming

Richten Sie CSS-benutzerdefinierte Eigenschaften für Light-/Dark-Mode-Theming ein.

Design-Tokens

Konvertieren Sie Design-System-Tokens in CSS-Variablen.

Markenfarben

Erstellen Sie eine wiederverwendbare CSS-Variablenmenge für Markenfarben.

Komponentenbibliotheken

Definieren Sie anpassbare Farbvariablen für CSS-Komponentenbibliotheken.

Technical Guide

CSS-Eigenschaften (var(--name)) werden im :root-Selektor für den globalen Gültigkeitsbereich definiert. Das HEX-Format speichert den vollständigen Farbwert: --primär: #3B82F6. Das RGB-durch-Komma-getrennt-Format speichert die Kanäle: --primär: 59, 130, 246, das als rgb(var(--primär)) oder rgba(var(--primär), 0,5) für flexible Deckkraft verwendet werden kann. Das HSL-Format speichert: --primär: 217, 91%, 60%, das als hsl(var(--primär)) verwendet werden kann. Die RGB- und HSL-Formate sind flexibler, da sie es ermöglichen, an der Verwendungsstelle Deckkraft hinzuzufügen, ohne die Variable neu zu definieren. CSS-Eigenschaften werden von allen untergeordneten Elementen geerbt und können in Medienabfragen oder Klassen-Selektoren für das Theme-Switching überschrieben werden. Sie werden in allen modernen Browsern unterstützt und verhalten sich wie reguläre CSS-Eigenschaften.

Tips & Best Practices

1
Verwenden Sie semantische Namen wie --primär, --sekundär anstelle von --blau, --rot für Flexibilität
2
Das RGB-Format ist am flexibelsten: rgba(var(--primär), 0,5) gibt Ihnen die Opazitätskontrolle
3
Das HSL-Format ermöglicht es Ihnen, Variationen abzuleiten: hsl(var(--primär-h), var(--primär-s), 90%)
4
Überschreiben Sie Variablen in Medienabfragen für den Dark-Mode: @media (prefers-color-scheme: dark) { :root { ... } }
5
Halten Sie die Anzahl der Variablen überschaubar - die meisten Systeme benötigen 5-10 Farbvariablen

Related Tools

HEX zu RGB Konverter

Konvertieren Sie HEX-Farbcodes in RGB-Werte sofort mit einer Live-Vorschau.

🎨 Color Tools

HEX zu HSL Konverter

Wandeln Sie HEX-Farbcodes in HSL-Werte (Farbton, Sättigung, Helligkeit) um.

🎨 Color Tools

Farbpicker

Interaktiver Farbpicker mit HEX-, RGB-, HSL- und CMYK-Ausgaben.

🎨 Color Tools

Tailwind Farbfinder

Finden Sie die nächstliegende Tailwind CSS-Farbklassen für jeden HEX-Code.

🎨 Color Tools

CSS-Filter-Generator

Wenden Sie CSS-Filtereffekte wie Unschärfe, Helligkeit, Kontrast und weitere mit visuellen Steuerelementen an.

🎨 CSS & Design

Frequently Asked Questions

Q Welches Format sollte ich wählen?

HEX für Einfachheit und Lesbarkeit. RGB, wenn Sie Opazitätskontrolle über rgba(var(...), alpha) benötigen. HSL, wenn Sie Farbvariationen ableiten möchten, indem Sie einzelne Komponenten anpassen.

Q Werden CSS-benutzerdefinierte Eigenschaften überall unterstützt?

Ja, in allen modernen Browsern seit 2016 (Chrome 49+, Firefox 31+, Safari 9.1+, Edge 15+). Nicht unterstützt in IE11.

Q Kann ich Variablen für den Dark-Mode verwenden?

Absolut. Definieren Sie Werte im Light-Modus in :root, dann überschreiben Sie diese in @media (prefers-color-scheme: dark) { :root { ... } } oder auf einer .dark-Klasse.

About This Tool

Farbe zu CSS-Variablen is a free online tool by FreeToolkit.ai. All processing happens directly in your browser — your data never leaves your device. No registration or installation required.