Zum Inhalt springen
TextArray1.41.0
100% lokal

CSS-Farbvariablen-Extractor

Finde jede Farbe in deinem CSS und wandle sie in wiederverwendbare benutzerdefinierte Eigenschaften um.

Eingabe
0
Ausgabe
Verwandte Tools
FarbkonverterEntwickler-Tools
CSS-FormatiererEntwickler-Tools
KontrastprüfungEntwickler-Tools
i18n SchlüsseldiffEntwickler-Tools
TOML-zu-JSON-KonverterEntwickler-Tools
SQL zu JSONEntwickler-Tools
CSS-Farbvariablen-Extractor
Füge ein Stylesheet ein und dieses Tool durchsucht jede Deklaration nach Farbwerten, die als Hex-, RGB()/RGBA()- oder HSL()/HSLA()-Werte geschrieben sind, und schreibt die Regeln um, damit sie auf benutzerdefinierte Eigenschaften verweisen, anstatt denselben Wert überall zu wiederholen. Es wurde entwickelt, um ein Stylesheet zu bereinigen, das organisch gewachsen ist – eine Übergestaltung, eine Komponentenbibliothek-Zusammenführung oder CSS aus einem Design-Tool – wenn derselbe Blau-Ton ein Dutzend leicht unterschiedliche Wege tippisiert wird.
Die Benennungsoption steuert, wie jede Variable benannt wird: nach Reihenfolge des ersten Auftretens (--color-1, --color-2…), nach einem ungefähren Farbton und Helligkeit (--color-dark-blue, --color-light-gray) oder nach der Eigenschaft, auf der sie zuerst auftritt (--color-background, --color-border). Aktiviere "Gleiche Farben, die unterschiedlich geschrieben sind, zusammenführen", um #ff0000, rgb(255, 0, 0) und hsl(0, 100%, 50%) in eine einzige Variable zu falten, obwohl der Quelltext unterschiedlich ist; identische Werte werden immer zusammengeführt, unabhängig davon. Der Ähnlichkeitsschieber geht weiter und führt Farbtöne zusammen, die nah beieinander liegen, aber nicht identisch sind – nützlich, wenn sich eine Palette ungeplant nahezu identische Grautöne oder Blaus ansammelte. Wähle, ob der generierte Block unter :root oder einem benutzerdefinierten Selector sitzt, wähle die Notation, in der die Variablen ausgegeben werden, oder wechsle zu einer einfachen Farbliste und Häufigkeitszählern, wenn du nur ein Audit statt einer Umschreibung möchtest.
Der Scanner sucht nur innerhalb von tatsächlichen Deklarationswerten, daher verwechselt er nie einen ID-Selector wie #abcabc mit einer Farbe, und er lässt Kommentare, zitierte Zeichenketten und url()-Inhalte völlig unberührt. Windows- und Unix-Zeilenumbrüche funktionieren beide, und das Tool wird nicht durch verschachtelte Funktionen wie eine Farbe in einer Farbverlaufsliste verwirrt.
Alles läuft lokal in deinem Browser – dein Stylesheet wird nie irgendwohin hochgeladen, daher ist es sicher, Code aus einem privaten Projekt einzufügen. Kopiere das Ergebnis, lade es als .txt-Datei herunter, oder sende die Ausgabe zurück in die Eingabe, um es mit einem weiteren Durchgang zu verfeinern.
Häufige Fragen
Welche Farbformate erkennt es?
Hex (#rgb, #rgba, #rrggbb, #rrggbbaa), rgb()/rgba() und hsl()/hsla(), sowohl in Komma- als auch in Leerzeichensyntax. Benannte Farben wie "red" werden nicht abgeglichen.
Was zählt als "dieselbe Farbe" beim Zusammenführen?
Byte-identische Werte werden immer zusammengeführt. Das Aktivieren der Äquivalenzoption führt auch dieselbe Farbe, die in einer anderen Notation geschrieben ist, zusammen (Hex vs. RGB vs. HSL). Der Ähnlichkeitsschieber führt zusätzlich Farbtöne zusammen, die nur ähnlich sind, durch einen durchschnittlichen Kanaldifferenzwert, den du steuern kannst.
Wie werden die neuen Variablennamen gewählt?
Nach Reihenfolge des ersten Auftretens, nach einem ungefähren Farbton- und Helligkeitsnamen oder nach der CSS-Eigenschaft, auf der die Farbe zuerst gefunden wurde – deine Wahl. Eine Kollision erhält ein numerisches Suffix.
Wird es etwas in Kommentaren, Zeichenketten oder url() anfassen?
Nein. Nur Farben in tatsächlichen Deklarationswerten werden abgeglichen – Text in Kommentaren, zitierten Zeichenketten und url(...) wird genau so gelassen, wie er geschrieben ist.
Wird mein CSS irgendwohin hochgeladen?
Nein. Die Extraktion läuft vollständig in deinem Browser – dein Stylesheet verlässt dein Gerät nie.