Farbmuster-SVG-Generator
Erhalten Sie ein fertiges Farbfeld für Dokumente und Legenden: #3498db wird zu einem SVG-Quadrat von 24 mal 24, gefüllt mit dieser Farbe und für Bildschirmleser beschriftet. Größe und Eckenrundung passen Sie bei Bedarf an. 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
- Farbe
- #3498db
- Hex
- #3498db
- Rohes Hex
- #3498db
- Widerstand (Ω)
- 52
- G
- 152
Designsysteme, Styleguides und technische Dokumentation brauchen ständig ein kleines farbiges Rechteck neben dem Hex-Code, damit Leser Markenblau, Statusrot oder Diagrammserienfarben sehen, ohne ein separates Palette-Werkzeug zu öffnen. SVG jedes Mal von Hand zu schreiben lädt zu Tippfehlern im fill-Attribut, zu uneinheitlichen Maßen in einer Legende und zu ungültigem Hex ein, das erst später im Browser scheitert. Dieser Farbmuster-SVG-Generator nimmt eine Hex-Farbe, optionale Breite und Höhe sowie optionalen Eckenradius entgegen, prüft die Eingaben und liefert deterministisches Inline-SVG-Markup, das Sie in Markdown, HTML-Docs oder Component-Storybooks einfügen können.
Was ein Farbmuster-SVG ist und wann Sie eines brauchen
Ein Farbmuster ist ein kleines gefülltes Rechteck, das für ein einzelnes Farb-Token steht: Primärmarke, Gefahrenzustand, Diagrammserie A oder eine Palette-Stufe in einem Designsystem. Im Web ist die portabelste Darstellung ein Inline-SVG-Element mit einem einzigen rect, dessen fill einem normalisierten Hex-Code entspricht. Anders als ein Raster-PNG-Chip skaliert SVG scharf in Retina-Dokumenten, druckt sauber und lässt sich in Markdown-Renderern einbetten, die rohes HTML oder SVG erlauben.
Anders als ein CSS-Hintergrund auf einem span ist das Markup in sich geschlossen: Sie können eine Zeichenkette in ein README, eine Confluence-Seite, eine SVG-fähige E-Mail-Vorlage oder eine Storybook-Notiz kopieren, ohne ein Stylesheet mitzuliefern. Teams, die Komponentenbibliotheken veröffentlichen, brauchen oft Dutzende identischer Chips, die sich nur in Füllung und Beschriftung unterscheiden; sie von Hand zu erzeugen ist mühsam und fehleranfällig, besonders wenn Autoren Dreistellig-Kurzform, Großschreibung und fehlende Hash-Präfixe mischen. Optionaler Eckenradius unterstützt moderne UI-Chips, ohne dass Sie path-Daten von Hand bearbeiten müssen.
Wo ein fertiges Farbfeld hilft
Dokumentationsgeneratoren, die Design-Tokens in lesbare Seiten verwandeln, können diesen Endpunkt einmal pro Token aufrufen und das zurückgegebene Markup neben Token-Name, Hex-Wert und Nutzungshinweis einfügen, ohne SVG-Vorlagen pro Framework zu erfinden. Design-QA-Bots können jedes Muster aus einer Token-Datei in der CI neu erzeugen und den Build fehlschlagen lassen, wenn Markup abweicht, und so versehentliche Großschreibung oder fehlende Hash-Präfixe vor Release-Notes abfangen.
Halten Sie Anfragen klein, pinnen Sie das Feld svg in Goldens, und Sie erhalten reproduzierbare Chips für READMEs, Styleguides, CMS-Blöcke und Edge-Marketingseiten, ohne eine Bild-Pipeline aufzubauen oder Farben bei jedem Token-Wechsel nach PNG zu rastern.
Anwendungsfälle
Dokumentations-Chips für Design-Tokens
Erzeugen Sie ein einheitliches SVG-Muster für jede Marken- oder Statusfarbe in einem Styleguide, damit Leser die Füllung neben dem Hex-Code sehen.
Diagramm- und Kartenlegenden
Bauen Sie farbige Chips fester Größe für Serienlegenden und Choroplethen-Schlüssel mit geprüften Hex-Füllungen und optional abgerundeten Ecken.
Häufige Fragen
Welche Hex-Formate akzeptiert der Farbmuster-SVG-Generator?
Drei- oder sechsstellige Hexadezimalfarben, mit oder ohne führendes #, ohne Unterscheidung der Groß-/Kleinschreibung. Kurzform wie #abc wird zu #aabbcc expandiert.
Welche Standardmaße hat das Muster?
Sie können eines oder beide auf jede Ganzzahl von 1 bis 512 setzen für dichtere oder größere Chips.
Wie erzeuge ich ein abgerundetes Muster?
Sie darf die Hälfte der kleineren Seite nicht überschreiten. Bei rx 0 oder Weglassen hat das rect scharfe Ecken und kein rx-Attribut.
Erkennen Bildschirmleser, welche Farbe das Farbfeld zeigt?
Ja. Jedes Farbfeld ist als Bild gekennzeichnet und trägt eine Beschriftung mit seinem Code, etwa Color swatch #3498db. Ein Bildschirmleser liest die Farbe also vor, statt sie zu überspringen.
Kann ich das Farbfeld in ein README oder eine Markdown-Seite einfügen?
Ja, überall dort, wo die Darstellung rohes HTML oder SVG erlaubt. Das Farbfeld ist ein einziges, eigenständiges Stück ohne Stylesheet und bleibt auf hochauflösenden Bildschirmen und im Druck scharf.
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/swatch-svg \
-H "Authorization: Bearer $KIT_KEY" \
-H "Content-Type: application/json" \
-d '{"color":"#3498db"}'const res = await fetch("https://api.kit.forhosting.com/color/swatch-svg", {
method: "POST",
headers: {
"Authorization": `Bearer ${process.env.KIT_KEY}`,
"Content-Type": "application/json"
},
body: JSON.stringify({
"color": "#3498db"
})
});
const { task_id } = await res.json();import os, requests
res = requests.post(
"https://api.kit.forhosting.com/color/swatch-svg",
headers={"Authorization": f"Bearer {os.environ['KIT_KEY']}"},
json={
"color": "#3498db"
},
)
task_id = res.json()["task_id"]<?php
$res = file_get_contents("https://api.kit.forhosting.com/color/swatch-svg", false, stream_context_create([
"http" => [
"method" => "POST",
"header" => "Authorization: Bearer " . getenv("KIT_KEY") . "\r\nContent-Type: application/json",
"content" => '{"color":"#3498db"}',
],
]));
$task = json_decode($res, true);body := bytes.NewBufferString(`{"color":"#3498db"}`)
req, _ := http.NewRequest("POST", "https://api.kit.forhosting.com/color/swatch-svg", body)
req.Header.Set("Authorization", "Bearer "+os.Getenv("KIT_KEY"))
req.Header.Set("Content-Type", "application/json")
res, _ := http.DefaultClient.Do(req)Beispiel-Anfrage
{
"color": "#3498db"
}Beispiel-Antwort
{
"task_id": "tsk_a1b2c3d4e5f6a1b2c3d4e5f6",
"type": "color.swatch_svg",
"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.
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
Fehlgeschlagene Validierung wird als invalid_input gemeldet und nicht abgerechnet, was automatische Legenden-Builder schützt, wenn ein CMS-Feld noch einen Entwurfs-Farbnamen statt eines Hex-Codes enthält.
Was ein Farbmuster-SVG ist und wann Sie eines brauchen
Diese Fähigkeit standardisiert diesen Chip: Sie senden eine Farbzeichenkette und erhalten ein festes SVG mit width, height, viewBox, role und zugänglichem aria-label sowie dem expandierten sechsstelligen Hex und den RGB-Kanälen für Tabellen neben der Grafik.
Eingabevertrag, Validierungsregeln und Antwortfelder
Dreistellige Kurzform wie #abc wird zu #aabbcc expandiert und kleingeschrieben für einen stabilen Vertrag. Optionales rx setzt einen Eckenradius; es muss eine endliche Zahl größer oder gleich null sein und darf die Hälfte der kleineren Seite nicht überschreiten, Standard null für scharfe Ecken. Die Attributreihenfolge ist fest, sodass byteweiser Vergleich in Tests über JavaScript-Engines hinweg stabil bleibt. Senden Sie per POST ein JSON-Objekt mit dem Pflichtfeld color: eine Hex-Zeichenkette aus drei oder sechs hexadezimalen Ziffern, mit oder ohne führendes Hash. Die Aliase hex, fill, value, text und input werden für dasselbe Feld akzeptiert, damit Formular-Widgets und Skripte gängige Namen wiederverwenden können. Ungültige Längen, Nicht-Hex-Zeichen, 0x-Präfixe, nackte Zahlen und leere Zeichenketten scheitern mit invalid_input und benennen das Problem. Optionale width und height sind Ganzzahlen von eins bis fünfhundertzwölf einschließlich; lassen Sie sie weg, erhalten Sie den Standard-Chip vierundzwanzig mal vierundzwanzig für dichte Legenden. Bei Erfolg spiegelt der Body die normalisierte Farbe als color und hex, das original getrimmte hex_raw, die ganzzahligen Kanäle r, g und b, die aufgelösten width, height und rx, eine view_box-Zeichenkette, ein shorthand-Flag, eine kurze message und die SVG-Zeichenkette doppelt als svg und markup, damit Clients mit beiden Namen ohne Mapping binden können. Die SVG-Wurzel enthält stets den SVG-Namespace, passende width- und height-Attribute, ein viewBox von null null width height, role gleich img und ein aria-label mit dem normalisierten Hex für Screenreader.
Wo eine Farbmuster-SVG-API ihren Nutzen hat
Legenden-Builder für Diagramme und Karten brauchen identische Chip-Größen mit unterschiedlichen Füllungen; feste width und height bei nur variierender Farbe halten die Ausrichtung in Tabellen und Flex-Zeilen vorhersagbar. Weil die Implementierung reines Parse-Tier A ist, kostet jeder erfolgreiche Aufruf den veröffentlichten Basispreis $0.002 ohne Modell-Tokens und ohne ausgehendes Netz, und fehlgeschlagene Validierung wird nicht abgerechnet.
Integrationsbeispiele
CI-geprüfte README- und Storybook-Notizen
Regenerieren Sie Inline-SVG-Muster aus einer Token-JSON-Datei in der Continuous Integration und lassen Sie den Build bei Markup- oder Farbdrift fehlschlagen.
Technische Fragen
Was enthält die Antwort außer dem SVG-Markup?
Normalisierte #rrggbb-Farbe, originales hex_raw, RGB-Kanäle, width, height, rx, view_box, ein shorthand-Flag, eine kurze message und dasselbe Markup unter den Schlüsseln svg und markup.
Was kostet der Farbmuster-SVG-Generator?
Das Browser-Tool ist kostenlos. API-Anfragen nutzen vorausbezahltes KIT-Guthaben zu $0.002 pro erfolgreichem Aufruf; ungültige Eingabe wird nicht abgerechnet.