Hex zu CSS-Variable
Machen Sie aus einer losen Farbe eine wiederverwendbare CSS-Variable: #3366ff mit dem Namen brand-primary wird zu --brand-primary: #3366ff;, Kurzformen erweitert und Hex in Kleinbuchstaben. Kostenlos in Ihrem Browser.
- Kostenlos
- Läuft in Ihrem Browser
- Ohne Anmeldung
- Ihre Daten bleiben auf Ihrem Gerät
Im Browser ausführen – kostenlos
Rechenbeispiel
- Hex
- #3366ff
- Name
- brand-primary
- Wert
- #3366ff
- Hex6
- 3366ff
- Rohes Hex
- #3366ff
- Name
- --brand-primary
Eine CSS-Custom-Property —auch CSS-Variable genannt— ist ein wiederverwendbares Token, das Sie einmal deklarieren und mit var() in einem Stylesheet, einer Theme-Datei oder einer Design-Token-Pipeline referenzieren.
Was eine CSS-Custom-Property ist und warum man Hex einpackt
CSS-Custom-Properties sind gewöhnliche CSS-Deklarationen, deren Namen mit zwei Bindestrichen beginnen. Hex bleibt das Austauschformat, das die meisten Wähler, Marken-PDFs und Token-Dateien noch exportieren, aber ein rohes #3366ff ist kein Stylesheet-Vertrag: Es hat keinen Namen, kein -- Präfix und kein abschließendes Semikolon. Es als Bindestrich-Ident-Deklaration einzupacken ist eine kleine, exakte Transformation, die in Pipelines trotzdem schiefgeht — fehlende Rauten, gemischte Großschreibung, unexpandierte dreistellige Kurzform, Namen die mit einer Ziffer beginnen, aus Gewohnheit eingefügte Sass-$Variablen oder eine var()-Hülle, wo nur der Ident hingehört.
Jeder dieser Fehler erzeugt CSS, das fast richtig wirkt und dann beim Parsen oder im Review scheitert. Ein eigener Schritt von Hex zur CSS-Variable standardisiert den Vertrag: Farbe prüfen, Namen prüfen, Kurzform expandieren, das sechsstellige Hex klein schreiben, die Großschreibung des Idents bewahren und ein Leerzeichen nach dem Doppelpunkt plus abschließendes Semikolon ausgeben. Das Ergebnis ist eine einfügefertige Definitionszeile für :root, eine Theme-Klasse oder ein erzeugtes tokens.css, ohne die Grammatik in jedem Depot neu abzuleiten.
Wo ein Hex-zu-CSS-Variablen-Formatierer echten Nutzen stiftet
Design-Token-Depots und Style-Dictionary-Pipelines wandeln strukturierte Palettenobjekte in CSS-Custom-Properties um; ein gemeinsamer Formatierer hält jedes Paket bei derselben Deklarationsgrammatik statt Ad-hoc-Vorlagen, die über Rautenschreibung, Kurzform oder das Leerzeichen nach dem Doppelpunkt streiten. Komponentenbibliotheken und Storybook-Dokumentation können einen Farbwähler plus Namensfeld zeigen und das genaue declaration in Schnipsel kopieren, die zu den Produktions-Stylesheets passen. Theme-Generatoren, die helle und dunkle :root-Blöcke ausgeben, brauchen einen letzten Schritt, der niemals einen unzulässigen Bindestrich-Ident erfindet oder das Semikolon weglässt.
Bevorzugen Sie diese Fähigkeit, wenn Sie bereits ein Hex-Token und einen gewählten Namen haben und nur die Definitionszeile brauchen; sie wandelt Hex nicht nach HSL, löst keine benannten CSS-Farben wie rebeccapurple auf und akzeptiert kein achtstelliges Alpha-Hex. Pinnen Sie die declaration-Zeichenkette in Tests, halten Sie Namen in kebab-case oder der Hauskonvention, und Sie erhalten reproduzierbare Custom-Property-Zeilen für Designsysteme, Edge-Worker und Dokumentationsgeneratoren, ohne eine volle Farblabor-Bibliothek nur zum Einpacken aufzusetzen.
Anwendungsfälle
Storybook- und Komponentendokumentation
Lassen Sie Autorinnen und Autoren ein Hex und einen Token-Namen wählen und dann das genaue declaration-Feld in Codeschnipsel kopieren, die zum Produktions-:root-Block passen.
Theme- und Palettengeneratoren
Nachdem eine helle oder dunkle Hex-Rampe berechnet ist, packen Sie jeden Halt als benannte CSS-Custom-Property, damit die Theme-Datei beim ersten Ausstoß gültiges CSS ist.
Häufige Fragen
Wie packe ich eine Hex-Farbe als CSS-Custom-Property ein?
Senden Sie hex (3 oder 6 Ziffern, optionales #) und name (mit oder ohne --).
Braucht der Name ein führendes --?
Nein. brand-primary und --brand-primary werden beide zu --brand-primary. Die Großschreibung bleibt.
Welche Hex-Formate werden akzeptiert?
Dreistellige (#RGB) und sechsstellige (#RRGGBB) hexadezimale Farben, mit oder ohne führendes #. Die Kurzform wird expandiert. Alpha-Formen (#RGBA, #RRGGBBAA) und benannte CSS-Farben werden nicht akzeptiert.
Wie sieht die Definitionszeile aus?
Immer --<ident>: #<sechs kleine Hex-Ziffern>; mit einem Leerzeichen nach dem Doppelpunkt und einem abschließenden Semikolon. Beispiel: --brand-primary: #3366ff;.
Welche Variablennamen werden abgelehnt?
Der Name muss mit einem Buchstaben oder Unterstrich beginnen, optional nach einem Bindestrich, und darf nur Buchstaben, Ziffern, Bindestriche und Unterstriche enthalten. Ein Name, der mit einer Ziffer beginnt, oder eine Sass-Variable mit $ wird abgelehnt, statt kaputtes CSS zu erzeugen.
Verwandte Tools
Für Entwickler — API-Zugang
Alles auf dieser Seite ist auch per API verfügbar. Dieser Abschnitt richtet sich an Teams, die es in ihre eigenen Systeme einbinden möchten; alle anderen nutzen einfach das Tool oben.
Endpunkt
Authentifizierung per Bearer-Token. Ein einziger POST stellt die Aufgabe in die Warteschlange; das Ergebnis erhalten Sie per Webhook oder über einen signierten Link.
Aufruf aus Ihrem Stack
curl -X POST https://api.kit.forhosting.com/color/hex-to-css-var \
-H "Authorization: Bearer $KIT_KEY" \
-H "Content-Type: application/json" \
-d '{"hex":"#3366ff","name":"brand-primary"}'const res = await fetch("https://api.kit.forhosting.com/color/hex-to-css-var", {
method: "POST",
headers: {
"Authorization": `Bearer ${process.env.KIT_KEY}`,
"Content-Type": "application/json"
},
body: JSON.stringify({
"hex": "#3366ff",
"name": "brand-primary"
})
});
const { task_id } = await res.json();import os, requests
res = requests.post(
"https://api.kit.forhosting.com/color/hex-to-css-var",
headers={"Authorization": f"Bearer {os.environ['KIT_KEY']}"},
json={
"hex": "#3366ff",
"name": "brand-primary"
},
)
task_id = res.json()["task_id"]<?php
$res = file_get_contents("https://api.kit.forhosting.com/color/hex-to-css-var", false, stream_context_create([
"http" => [
"method" => "POST",
"header" => "Authorization: Bearer " . getenv("KIT_KEY") . "\r\nContent-Type: application/json",
"content" => '{"hex":"#3366ff","name":"brand-primary"}',
],
]));
$task = json_decode($res, true);body := bytes.NewBufferString(`{"hex":"#3366ff","name":"brand-primary"}`)
req, _ := http.NewRequest("POST", "https://api.kit.forhosting.com/color/hex-to-css-var", body)
req.Header.Set("Authorization", "Bearer "+os.Getenv("KIT_KEY"))
req.Header.Set("Content-Type", "application/json")
res, _ := http.DefaultClient.Do(req)Beispiel-Anfrage
{
"hex": "#3366ff",
"name": "brand-primary"
}Beispiel-Antwort
{
"task_id": "tsk_a1b2c3d4e5f6a1b2c3d4e5f6",
"type": "color.hex_to_css_var",
"status": "queued",
"_links": {
"result": "/tasks/tsk_…/result"
}
}Die API arbeitet asynchron: Sie erhalten sofort eine task_id. Polling ist mit 1 Anfrage pro Sekunde erlaubt.
Preis
Der Preis steht auf der Seite – keine Tokens, keine Credits. Fehlgeschlagene Aufgaben werden nicht berechnet.
Limits
max_name_len | 64 |
Fehler
| HTTP | Code | Bedeutung |
|---|---|---|
401 | unauthorized | Der API-Schlüssel fehlt oder ist ungültig – prüfen Sie den Authorization-Header (Bearer). |
402 | insufficient_balance | Ihr Guthaben reicht für diese Aufgabe nicht aus – Aufladungen verfallen nicht. |
404 | unknown_type | Unbekannter Aufgabentyp – prüfen Sie das Feld „type“ gegen den Katalog. |
429 | rate_limited | Zu viele Anfragen – warten Sie kurz; Polling ist mit 1 Anfrage pro Sekunde erlaubt. |
Technische Hinweise
Teams speichern Markenfarben weiterhin als Hex-Codes in Figma, Marken-PDFs und JSON-Paletten und brauchen dann eine einzige deterministische Zeile zum Einfügen in :root oder einen Theme-Block. Dieses Werkzeug packt eine geprüfte Hex-Farbe in eine benannte Custom-Property-Deklaration: Sie wählen den Variablennamen, der Solver normalisiert das Hex auf sechs Kleinbuchstaben-Ziffern mit Raute, prüft, dass der Name ein zulässiger Bindestrich-Ident ist, und liefert die Definitionszeile --name: #rrggbb;. Ungültige Hex-Codes und unzulässige Bezeichner scheitern mit invalid_input, statt CSS auszugeben, das nicht parsen würde. Dieselbe reine Logik läuft kostenlos im Browser und auf der API, sodass erzeugte Tokens zwischen lokalen Vorschauen, kontinuierlicher Integration und Produktions-Stylesheets nicht auseinanderlaufen.
Was eine CSS-Custom-Property ist und warum man Hex einpackt
Sie schreiben --brand-primary: #3366ff; auf :root oder einen beliebigen Selektor und verbrauchen das Token mit color: var(--brand-primary) auf Schaltflächen, Links und Flächen. Diese einzige Wahrheitsquelle ist, wie Designsysteme ein Hex aus Figma, eine JSON-Palette und ein Produktions-Stylesheet in Einklang halten, ohne Dutzende fest verdrahteter Literale zu jagen.
Eingabevertrag, Prüfregeln und die Definitionszeile
Umgebender Leerraum wird gekürzt. Bei Erfolg kommt das Hex stets als kleines #rrggbb zurück, dreistellige Kurzform wird expandiert (#abc wird #aabbcc) und der Name kommt mit -- Präfix zurück, während die Buchstaben ihre ursprüngliche Großschreibung behalten. Das Hauptfeld declaration ist die Definitionszeile selbst: --brand-primary: #3366ff;. Senden Sie einen JSON-Körper mit zwei Pflichtzeichenketten. hex ist die Farbe: drei oder sechs hexadezimale Ziffern, optionale führende Raute, Buchstaben groß oder klein. Die Aliasse color, value, text, input und code akzeptiert derselbe Solver. name ist der Ident der Custom-Property, mit oder ohne führendes -- ; Aliasse umfassen variable, var, var_name, custom_property und ident. Dieselbe Zeichenkette wird für Token-Tabellen in variable und value geteilt, und root_block hüllt die Zeile als :root { --brand-primary: #3366ff; } ein, als Saat für ein Stylesheet mit einem Einfügen. Die Ganzzahlkanäle r, g und b sowie die Schalter shorthand, had_hash und had_prefix beschreiben die Ursprungsform. Fehlgeschlagene Prüfung — fehlendes Feld, leeres Hex nach einer Raute, Länge ungleich drei oder sechs, Nicht-Hex-Zeichen, ein 0x-Programmierpräfix, Leerzeichen im Namen, ein Sass-$-Präfix, eine var()-Hülle, ein Ident der nicht mit Buchstabe oder Unterstrich beginnt, oder ein Name länger als vierundsechzig Zeichen inklusive Präfix — liefert invalid_input mit Feldnamen und wird nie berechnet. Der Preis ist ein Pauschal $0.002 je erfolgreicher Anfrage.
Wo ein Hex-zu-CSS-Variablen-Formatierer echten Nutzen stiftet
Weil die Umsetzung reines Parse-Stufe-A ist, kostet jeder erfolgreiche Aufruf den veröffentlichten Grundpreis $0.002 ohne Modell-Tokens und ohne ausgehendes Netz, und fehlgeschlagene Validierung wird nicht berechnet.
Integrationsbeispiele
Design-Token- und Stylesheet-Pipelines
Wandeln Sie Hex-Einträge aus einer Marken-JSON-Datei in stabile --name: #rrggbb;-Zeilen für Style Dictionary, Theo oder ein selbstgebautes tokens.css um, ohne Schreibweisen- oder Kurzformdrift zwischen Maschinen.
Technische Fragen
Was kostet das Werkzeug Hex zu CSS-Variable?
Das Browser-Werkzeug ist kostenlos. API-Anfragen nutzen das vorausbezahlte KIT-Guthaben zu $0.002 je erfolgreichem Aufruf; ungültige Eingabe wird nicht berechnet.