Embed ColorArchive — Free Color Widgets & Badges
Add a free color tool to your site in two ways: a full interactive color-picker widget, or a lightweight HTML color badge for blog posts and docs. Both are free, and both link back to the ColorArchive collection of 5,446 curated colors.
Option 1 — HTML color badge (best for blogs & docs)
A self-contained, inline-styled link — no JavaScript, no iframe. It renders anywhere you can paste HTML and links back to the color. Grab a badge for any specific color from its page (the Embed button), or start with this example:
<a href="https://colorarchive.org/colors/cobalt-core-vivid/?utm_source=embed&utm_medium=badge&utm_campaign=color" target="_blank" rel="noopener" style="display:inline-flex;align-items:center;gap:8px;padding:6px 12px;border:1px solid #e5e7eb;border-radius:9999px;font:500 14px system-ui,-apple-system,sans-serif;color:#111;text-decoration:none;background:#fff"><span style="width:16px;height:16px;border-radius:4px;background:#2563EB;border:1px solid rgba(0,0,0,.12)"></span>Cobalt · #2563EB · ColorArchive</a>Palette badge
Showcasing a set of colors? Use a palette badge:
<div style="display:inline-block;font:500 13px system-ui,-apple-system,sans-serif;border:1px solid #e5e7eb;border-radius:12px;padding:10px;background:#fff"><div style="display:flex;gap:4px;margin-bottom:8px"><span style="display:inline-block;width:32px;height:32px;border-radius:6px;background:#0EA5E9"></span><span style="display:inline-block;width:32px;height:32px;border-radius:6px;background:#22C55E"></span><span style="display:inline-block;width:32px;height:32px;border-radius:6px;background:#FACC15"></span><span style="display:inline-block;width:32px;height:32px;border-radius:6px;background:#F97316"></span><span style="display:inline-block;width:32px;height:32px;border-radius:6px;background:#E11D48"></span></div><a href="https://colorarchive.org/all-colors/?utm_source=embed&utm_medium=badge&utm_campaign=palette" target="_blank" rel="noopener" style="color:#555;text-decoration:none">Coastal palette · ColorArchive</a></div>Option 2 — Interactive color-picker widget
An embeddable iframe widget that lets your visitors explore hex, RGB, and HSL values, see the color family, and browse related colors from the archive.
<iframe src="https://colorarchive.org/embed/?utm_source=embed&utm_medium=iframe" width="360" height="500" frameborder="0" style="border-radius:12px;border:1px solid #e5e7eb"></iframe>Set an initial color
Add a ?color= hex (without the #). The widget is responsive from 300px wide; recommended 360 × 500.
<iframe src="https://colorarchive.org/embed/?color=FF5733" width="360" height="500" frameborder="0" style="border-radius:12px;border:1px solid #e5e7eb"></iframe>Attribution
Each widget and badge includes a small “ColorArchive” link. Please keep it visible — it’s what keeps these tools free, and it points your readers to the full archive of 5,446 curated colors, palette collections, and design tools.