Color Swatch Embedder
Turn any color into a small embeddable square: a stable image URL for wikis and docs, Markdown and HTML snippets, or a copy-and-paste image for editors like Confluence. Style, size and label live in the URL. Free and 100% in your browser.
%22%20stroke-width%3D%221%22%2F%3E%3C%2Fsvg%3E)
Confluence Cloud usually rejects external image URLs — there, “Copy as image” and paste is the reliable route. Wikis, READMEs and blogs take the URL or the Markdown snippet directly.
A color reference that lives in the URL
Design docs, wiki pages and READMEs constantly talk about colors — “the header uses our green” — and a bare hex code in the text is easy to misread and impossible to see. This tool gives every color a small, stable image: the code, the style and the size are all part of the URL, so the square never changes, needs no account, and can be hand-edited for the next color without opening this page again. The response is an SVG a few hundred bytes long, cached as immutable, and sharp at any zoom level.
Which output to use where
- Image URL — for wikis and editors that accept external images by URL (Confluence Server/Data Center, MediaWiki, Notion). Paste it into the image-by-URL dialog.
- Markdown — for GitHub/GitLab READMEs, issues and docs sites. The square renders inline and links to the picker with the exact value preloaded.
- HTML — for blogs and anywhere raw HTML is allowed; width and height are set so the page never shifts while loading.
- Copy as image — for editors that only take pasted images, Confluence Cloud above all. The swatch becomes a normal attached picture.
Styles, labels, edge cases
Four shapes — flat, rounded, circle, pill — plus an optional hex label whose text color is chosen automatically for contrast against your color. A subtle outline is on by default so that near-white swatches stay visible on white pages; turn it off for flat design systems. Colors with transparency are carried as 8-digit hex and render with real alpha in the SVG.
Building a team palette page
The pattern that works well in practice: one table in your wiki, one row per token — swatch, name, hex, usage note. Because the style parameters live in the URL, you can build the whole table by editing the hex in each row, and the swatches stay perfectly consistent. When a color changes, you change the URL once and the page tells the truth again; nothing is uploaded, so there is no stale attachment to hunt down.
Frequently asked questions
How do I embed a color swatch in Confluence?
Two ways. If your Confluence accepts external images by URL (Server/Data Center usually does), paste the image URL from this page. Confluence Cloud's editor often doesn't — there, use “Copy as image” and paste the swatch directly into the page; it becomes a normal attached image.
Does the image URL stay stable?
Yes. The URL contains the full color code and style, the server holds no state, and the response is marked immutable — the same URL renders the same square forever, so it is safe inside documentation.
Why do the Markdown and HTML snippets include a link?
The image shows the color; the link lets readers open it in the picker — with the exact value preloaded — to copy other notations or build a palette from it. Remove the link if you only want the square.
Can the label say something other than the hex code?
Yes — type any text up to 40 characters, e.g. a token name like “Brand blue” or “Primary / hover”. It travels in the URL as a text parameter, is escaped on the server so it can only ever render as text, and becomes the image's alt text in the snippets. The font stays monospace so the square's width is predictable without a font engine.
Can I use any color, including alpha?
Any CSS color you enter is normalized to hex: 6 digits, or 8 when it carries transparency. 3- and 4-digit shorthands work in the URL too.
Is anything tracked when a page shows my swatch?
The swatch endpoint serves a static-cacheable image and stores nothing; requests appear only in the ordinary short-lived server logs described in the privacy policy. The color code itself is part of a URL you chose to publish.