CSS-Token-Extraktor

CSS Token Extractor

Zieht Farben, Abstände, Radien und Schriften aus einem Stylesheet und schlägt einen Satz Custom Properties vor.

Liest ein Stylesheet, zählt jede Farbe, Länge, jeden Radius, jede Schrift und jeden Schatten darin und schlägt für jeden Wert eine `--variable` vor, geordnet danach, wie oft er verwendet wird. Es kann dann das Stylesheet so umschreiben, dass es sie verwendet. Es ist ein Deklarations-Scanner auf dem Tokenizer des CSS-Formatierers, kein vollständiger Parser und kein Linter – es sagt Ihnen, welche Werte in der Datei sind, und das ist der Teil, der von Hand mühsam ist.

🔒 Läuft vollständig in Ihrem Browsercsstokensdesign-systemrefactor

CSS hinein

Eine .css-Datei hierher ziehen

Wird nur in diesem Tab gelesen.

Vorgeschlagene Tokens

Präfix (optional)

Wird vorangestellt, wie bei --app-color-1.

:root {
  /* 색 */
  --color-1: #6366f1;
  --color-2: #fff;
  --color-3: #1f2937;
  --color-4: rgba(0,0,0,.06);
  --color-5: rgba(0,0,0,.08);
  --color-6: #111827;
  --color-7: #4b5563;
  --color-8: #4f46e5;
  --color-9: #eef2ff;
  --color-10: #4338ca;
  --color-11: #e5e7eb;
  /* 글꼴 */
  --font-pretendard: "Pretendard", system-ui, sans-serif;
  /* 글자 크기 */
  --text-1: 12px;
  --text-2: 14px;
  --text-3: 20px;
  /* 행간 */
  --leading-1: 1.6;
  /* 간격 */
  --space-1: 4px;
  --space-2: 8px;
  --space-3: 16px;
  --space-4: 24px;
  --space-5: 32px;
  /* 모서리 */
  --radius-1: 8px;
  --radius-2: 12px;
  --radius-3: 999px;
  /* 그림자 */
  --shadow-1: 0 1px 2px rgba(0,0,0,.06);
  --shadow-2: 0 8px 24px rgba(0,0,0,.08);
}

Deklarationen

Farben

Abstandswerte

Radien

Schriften

Schon vorhandene Variablen

Farben 11

#6366f1×2
#fff×2
#1f2937×1
rgba(0,0,0,.06)×1
rgba(0,0,0,.08)×1
#111827×1
#4b5563×1
#4f46e5×1
#eef2ff×1
#4338ca×1
#e5e7eb×1

Abstände 5

4px×1
8px×3
16px×4
24px×3
32px×1

Radien 3

8px×1
12px×1
999px×1

Schriftgrößen 3

12px×1
14px×2
20px×1

Zeilenhöhen 1

1.6×1

Schriften 1

"Pretendard", system-ui, sans-serif×1

Schatten 2

0 1px 2px rgba(0,0,0,.06)×1
0 8px 24px rgba(0,0,0,.08)×1

Wie die Datei gelesen wird

· Gelesen mit dem Tokenizer des CSS-Formatierers, sodass ein url() oder ein #fff in einer Zeichenkette nicht als Farbe zählt und calc() ganz bleibt.
· Farben werden auf Hex normalisiert, sodass #FFF, white und rgb(255 255 255) zu einem Eintrag mit Zähler verschmelzen. Die Namen sind nach Häufigkeit nummeriert, --color-1 ist also meist die Marken- oder die Textfarbe — benennen Sie sie um.
· Abstände kommen nur aus margin, padding, gap und den inset-Eigenschaften, Radien nur aus border-radius, nummeriert nach Größe. width und height bleiben außen vor: Sie sind Maße, kein Rhythmus.
· Das JSON hat die Form des W3C-Design-Tokens-Entwurfs (DTCG), mit $type und $value. „CSS auf var() umgeschrieben“ ersetzt nur exakte Wertübereinstimmungen und lässt jedes andere Zeichen unangetastet.

Um aus einer herausgezogenen Farbe eine Skala zu bauen, macht der Generator für Farbabstufungen genau das; für den dunklen Modus die Dark-Mode-Palette.

So funktioniert es

Fügen Sie das Stylesheet ein oder legen Sie die Datei ab
Eine Datei auf einmal. Das Beispiel, das zuerst lädt, ist da, um die Form der Ausgabe zu zeigen, bevor Sie Ihr eigenes CSS holen.
Lesen Sie die Zählungen vor den Tokens
Vierzig Farben in einer Datei, die zwölf haben sollte, sind der Befund. Die gruppierten Listen darunter zeigen jeden Wert mit der Zahl seiner Vorkommen, die, die es zu benennen lohnt, stehen also oben und die Einzelfälle – gewöhnlich Fehler oder tote Regeln – unten.
Setzen Sie ein Präfix, wenn das Projekt eines braucht
Leer ergibt `--color-1`; `app` einzutippen ergibt `--app-color-1`. So oder so sind die Zahlen die Nutzungsrangfolge, keine Bedeutung, benennen Sie sie also um, sobald Sie wissen, wofür jeder Wert steht.
Nehmen Sie die Variablen, das JSON oder die umgeschriebene Datei
Die CSS-Ausgabe ist ein `:root`-Block, den Sie oben einfügen. Das JSON ist die Form des W3C-Design-Tokens-Entwurfs, für einen Build-Schritt oder ein Designwerkzeug. Die Umschreibung ist das ursprüngliche Stylesheet mit exakten Werttreffern gegen `var()` getauscht und sonst nichts angerührt – lesen Sie den Diff, bevor Sie ihn committen.

Häufige Fragen

Ist das umgeschriebene CSS so, wie es ist, sicher auszuliefern?

Lesen Sie zuerst den Diff. Die Ersetzung ist textuell und nur bei exakter Übereinstimmung, sie zerstört also keinen Wert, den sie nicht erkennt, aber sie kann auch nicht wissen, dass zwei identische Grautöne zwei verschiedene Dinge bedeuten – eine Rahmenfarbe und eine deaktivierte Beschriftung, die zufällig ein Hex teilen, bekommen dieselbe Variable, und später ändert jemand eine davon. Die Tokens richtig zu benennen ist der Schritt, der das abfängt, und es ist ein menschlicher.

Warum fehlen width und height in der Abstandsliste?

Absichtlich. Abstand ist ein Rhythmus – Margins, Padding, Gaps, Insets –, und ein Designsystem tokenisiert ihn. Breiten und Höhen sind Abmessungen: Eine 240px-Sidebar und ein 44px-Tippziel sind nicht zwei Punkte auf derselben Skala, und sie in die Liste zu setzen begräbt die Werte, die es sind.

Verarbeitet es SCSS, Less oder CSS-in-JS?

Zuverlässig nur reines CSS. Der Tokenizer kommt durch eine Menge SCSS, aber Verschachtelung, `@mixin`-Rümpfe und interpolierte Werte werden nicht aufgelöst, die Zählungen driften also. Kompilieren Sie es zuerst und scannen Sie die Ausgabe – das ist auch die Datei, die der Browser tatsächlich sieht.

Es hat eine Farbe in einer URL gefunden. Hat es?

Nein – dieser Fall ist abgedeckt. Der Scan läuft auf dem Tokenizer des CSS-Formatierers, ein `#fff` in einem `url()` oder einer Zeichenkette ist also eine Zeichenkette, und `calc()` bleibt am Stück, statt in Längen zerlegt zu werden. Das sind die beiden Stellen, an denen ein regulärer Ausdruck das falsch macht.

Eingabe aus

CSS formatieren und minimieren

CSS Beautifier & Minifier

Formatiert oder minimiert CSS, ohne etwas umzusortieren – der Token-Strom bleibt exakt erhalten.

Läuft vollständig in Ihrem Browser

Palettengenerator

Palette Generator

Baut aus einer Grundfarbe eine harmonische Palette nach Komplementär-, Triaden- und Analogregeln.

Läuft vollständig in Ihrem Browser

Dark-Mode-Palette

Dark Mode Palette

Baut aus einer Farbe eine Rampe von 50 bis 950 und spiegelt sie in eine dunkle, sodass jedes Token-Paar seinen Kontrast behält.

Läuft vollständig in Ihrem Browser

Nächste Tailwind-Farbe

Nearest Tailwind Colour

Findet zu jeder Farbe den nächstgelegenen Eintrag der Tailwind-Palette und zeigt den wahrnehmbaren Abstand.

Läuft vollständig in Ihrem Browser

Danach

Diese Tools nehmen an, was dieses hier erzeugt, das Ergebnis kann also direkt weiter.

Farbabstufungen

Tint & Shade Scale

Erzeugt aus einer Farbe eine Helligkeitsskala von 50 bis 950 mit wahrnehmungsgleichen Schritten, fertig als Design-Tokens.

Läuft vollständig in Ihrem Browser

CSS formatieren und minimieren

CSS Beautifier & Minifier

Formatiert oder minimiert CSS, ohne etwas umzusortieren – der Token-Strom bleibt exakt erhalten.

Läuft vollständig in Ihrem Browser

Dark-Mode-Palette

Dark Mode Palette

Baut aus einer Farbe eine Rampe von 50 bis 950 und spiegelt sie in eine dunkle, sodass jedes Token-Paar seinen Kontrast behält.

Läuft vollständig in Ihrem Browser

Palettengenerator

Palette Generator

Baut aus einer Grundfarbe eine harmonische Palette nach Komplementär-, Triaden- und Analogregeln.

Läuft vollständig in Ihrem Browser

Farbformat-Konverter

Colour Format Converter

Wandelt eine Farbe zwischen HEX, RGB, HSL, HWB, LAB, LCH und OKLCH um und nennt die nächste bekannte Farbe.

Läuft vollständig in Ihrem Browser

Farbwähler

Colour Picker

Wählt eine Farbe auf einem OKLCH-Feld, per Bildschirm-Pipette oder aus einem eigenen Bild, und kopiert sie in jeder Notation.

Läuft vollständig in Ihrem Browser