Farbfeld einbetten
Mach aus jeder Farbe ein kleines einbettbares Quadrat: eine stabile Bild-URL für Wikis und Doku, Markdown- und HTML-Snippets oder ein Bild zum Kopieren und Einfügen für Editoren wie Confluence. Stil, Größe und Label stecken in der URL. Kostenlos und 100 % in deinem Browser.
%22%20stroke-width%3D%221%22%2F%3E%3C%2Fsvg%3E)
Confluence Cloud lehnt externe Bild-URLs meist ab — dort ist „Als Bild kopieren“ plus Einfügen der zuverlässige Weg. Wikis, READMEs und Blogs nehmen die URL oder das Markdown-Snippet direkt.
Eine Farbreferenz, die in der URL lebt
Design-Dokumente, Wiki-Seiten und READMEs reden ständig über Farben — „der Header nutzt unser Grün“ — und ein nackter Hex-Code im Text ist leicht zu verlesen und unmöglich zu sehen. Dieses Werkzeug gibt jeder Farbe ein kleines, stabiles Bild: Code, Stil und Größe stecken komplett in der URL, das Quadrat ändert sich also nie, braucht kein Konto und lässt sich für die nächste Farbe von Hand editieren, ohne diese Seite noch einmal zu öffnen. Die Antwort ist ein SVG von ein paar hundert Bytes, als immutable gecacht und in jeder Zoomstufe scharf.
Welche Ausgabe wofür
- Bild-URL — für Wikis und Editoren, die externe Bilder per URL annehmen (Confluence Server/Data Center, MediaWiki, Notion). In den Bild-per-URL-Dialog einfügen.
- Markdown — für GitHub/GitLab-READMEs, Issues und Doku-Seiten. Das Quadrat rendert inline und verlinkt auf den Picker mit dem exakten Wert vorgeladen.
- HTML — für Blogs und überall, wo rohes HTML erlaubt ist; Breite und Höhe sind gesetzt, damit die Seite beim Laden nicht springt.
- Als Bild kopieren — für Editoren, die nur eingefügte Bilder nehmen, allen voran Confluence Cloud. Das Farbfeld wird ein ganz normales angehängtes Bild.
Stile, Labels, Randfälle
Vier Formen — flach, abgerundet, Kreis, Pill — plus ein optionales Hex-Label, dessen Textfarbe automatisch für Kontrast zu deiner Farbe gewählt wird. Eine dezente Kontur ist standardmäßig an, damit fast weiße Farbfelder auf weißen Seiten sichtbar bleiben; für flache Designsysteme schaltest du sie ab. Farben mit Transparenz laufen als 8-stelliges Hex und rendern im SVG mit echtem Alpha.
Eine Team-Palettenseite bauen
Das Muster, das sich in der Praxis bewährt: eine Tabelle im Wiki, eine Zeile pro Token — Farbfeld, Name, Hex, Verwendungsnotiz. Weil die Stil-Parameter in der URL leben, baust du die ganze Tabelle, indem du in jeder Zeile nur das Hex änderst, und die Farbfelder bleiben perfekt konsistent. Ändert sich eine Farbe, änderst du die URL einmal und die Seite sagt wieder die Wahrheit; nichts wird hochgeladen, es gibt also keinen veralteten Anhang zu jagen.
Häufige Fragen
Wie bette ich ein Farbfeld in Confluence ein?
Zwei Wege. Wenn dein Confluence externe Bilder per URL annimmt (Server/Data Center meist ja), füg die Bild-URL von dieser Seite ein. Der Editor von Confluence Cloud kann das oft nicht — dort nutzt du „Als Bild kopieren“ und fügst das Farbfeld direkt in die Seite ein; es wird ein normales angehängtes Bild.
Bleibt die Bild-URL stabil?
Ja. Die URL enthält den vollständigen Farbcode und den Stil, der Server hält keinen Zustand, und die Antwort ist als immutable markiert — dieselbe URL rendert für immer dasselbe Quadrat und ist damit sicher für Dokumentation.
Warum enthalten die Markdown- und HTML-Snippets einen Link?
Das Bild zeigt die Farbe; der Link lässt Leser sie im Picker öffnen — mit dem exakten Wert vorgeladen — um andere Notationen zu kopieren oder eine Palette daraus zu bauen. Entferne den Link, wenn du nur das Quadrat willst.
Kann die Beschriftung etwas anderes zeigen als den Hex-Code?
Ja — tipp beliebigen Text bis 40 Zeichen ein, z. B. einen Token-Namen wie „Brand blue“ oder „Primär / Hover“. Er reist als text-Parameter in der URL, wird auf dem Server escaped, sodass er immer nur als Text rendern kann, und wird in den Snippets zum Alt-Text des Bildes. Die Schrift bleibt Monospace, damit die Breite des Quadrats ohne Font-Engine vorhersagbar ist.
Kann ich jede Farbe nutzen, auch mit Alpha?
Jede CSS-Farbe, die du eingibst, wird zu Hex normalisiert: 6 Stellen, oder 8, wenn sie Transparenz trägt. 3- und 4-stellige Kurzformen funktionieren auch in der URL.
Wird etwas getrackt, wenn eine Seite mein Farbfeld zeigt?
Der Swatch-Endpoint liefert ein statisch cachebares Bild und speichert nichts; Anfragen erscheinen nur in den gewöhnlichen kurzlebigen Server-Logs, die die Datenschutzerklärung beschreibt. Der Farbcode selbst ist Teil einer URL, die du bewusst veröffentlicht hast.