Welche Eingabe wird akzeptiert?

Beliebiger Text mit Hex-Codes — durch Leerzeichen oder Kommas getrennt oder aus einem Stylesheet eingefügt. Nicht-Farb-Text wird ignoriert.

Wird Kurzform-Hex unterstützt?

Ja. 3-stelliges Hex wie #abc wird automatisch auf #AABBCC erweitert.

Kann ich die Variablennamen ändern?

Legen Sie ein Präfix fest, um den Basisnamen zu steuern; Nummern werden automatisch hinzugefügt. Bearbeiten Sie das Ergebnis für semantische Namen.

Was ist die Tailwind-Ausgabe?

Eine module.exports-Konfiguration mit den Farben unter theme.extend.colors, bereit zum Einbinden in tailwind.config.js.

Werden meine Farben hochgeladen?

Nein. Alles wird in Ihrem Browser verarbeitet und nichts verlässt Ihr Gerät.

Palette in CSS-Variablen

Farben einfügen

Variablennamen-Präfix

Ausgabeformat

4 Farben

Farbvorschau

#1E293B

#0EA5E9

#10B981

#F43F5E

CSS-Variablen

:root {
  --color-1: #1E293B;
  --color-2: #0EA5E9;
  --color-3: #10B981;
  --color-4: #F43F5E;
}

Fügen Sie eine Palette — oder beliebigen Text mit Hex-Farbcodes — ein, und dieses Tool extrahiert die Farben und schreibt sie als CSS-Custom-Properties, SCSS-Variablen oder Tailwind-Farbkonfiguration. Duplikate werden entfernt und jede Farbe erhält einen nummerierten Namen. Alles geschieht in Ihrem Browser.

So funktioniert es

Fügen Sie Hex-Farben (oder einen Text mit ihnen) in das Feld ein.
Legen Sie ein Namenspräfix fest und wählen Sie CSS-, SCSS- oder Tailwind-Ausgabe.
Kopieren Sie den generierten Code in Ihr Stylesheet oder Ihre Konfiguration.

Funktionsweise

Das Tool durchsucht Ihren Text nach Hex-Codes (3- oder 6-stellig, mit oder ohne #), normalisiert sie auf 6-stellige Großbuchstabenform und entfernt Duplikate unter Beibehaltung der Reihenfolge. Jede Farbe wird zu einer nummerierten Variable mit Ihrem Präfix und dann im gewählten Format ausgegeben: CSS-:root-Custom-Properties, SCSS-$-Variablen oder ein Tailwind-theme.extend.colors-Objekt.

Funktionen

Intelligente Extraktion

Findet Hex-Codes in beliebig eingefügtem Text und ignoriert den Rest.

Drei Formate

Gibt CSS-Custom-Properties, SCSS-Variablen oder eine Tailwind-Konfiguration aus.

Ohne Duplikate

Wiederholte Farben werden zusammengeführt, sodass jede Variable eindeutig ist.

Vollständig privat

Farben werden in Ihrem Browser verarbeitet und nie hochgeladen.

Anwendungsfälle

Design-Übergabe

Wandeln Sie eine Palette aus einem Design-Tool schnell in Code-Tokens um.

Theming

Erstellen Sie einen Satz CSS-Variablen für ein Website-Theme.

Tailwind-Projekte

Fügen Sie Markenfarben direkt in Ihre Tailwind-Konfiguration ein.

Style Guides

Dokumentieren Sie ein Farbsystem mit einheitlichen Variablennamen.

Hinweise

#RGB und #RRGGBB werden beide akzeptiert und normalisiert.
Farben behalten die Reihenfolge ihres ersten Auftretens; Duplikate werden entfernt.
Benennen Sie die Variablen nach dem Einfügen um, wenn Sie semantische Namen bevorzugen.
Die gesamte Verarbeitung läuft auf Ihrem Gerät; nichts wird hochgeladen.

FAQ

Welche Eingabe wird akzeptiert?: Beliebiger Text mit Hex-Codes — durch Leerzeichen oder Kommas getrennt oder aus einem Stylesheet eingefügt. Nicht-Farb-Text wird ignoriert.
Wird Kurzform-Hex unterstützt?: Ja. 3-stelliges Hex wie #abc wird automatisch auf #AABBCC erweitert.
Kann ich die Variablennamen ändern?: Legen Sie ein Präfix fest, um den Basisnamen zu steuern; Nummern werden automatisch hinzugefügt. Bearbeiten Sie das Ergebnis für semantische Namen.
Was ist die Tailwind-Ausgabe?: Eine module.exports-Konfiguration mit den Farben unter theme.extend.colors, bereit zum Einbinden in tailwind.config.js.
Werden meine Farben hochgeladen?: Nein. Alles wird in Ihrem Browser verarbeitet und nichts verlässt Ihr Gerät.