Share palettes anywhere with an embeddable color palette widget
The embeddable color palette widget lets you turn any set of swatches into a clean block of HTML you can paste into a blog post, a documentation page, a client handoff, or a Notion embed. There is no iframe, no remote script, and no tracking — just semantic markup and inline CSS that renders the moment the page loads.
Most palette generators stop at a screenshot or a hosted URL. Screenshots strip away the actual HEX values; hosted URLs break the day a service goes down. A self-contained snippet keeps your color codes as real, copyable text and survives any platform migration.
What you can configure
- Swatches — add any number of colors, name them, and reorder via drag and drop.
- Color format — display HEX, RGB, HSL, or OKLCH labels next to each swatch.
- Layout — choose between horizontal strips, vertical lists, or responsive grids.
- Style — toggle rounded corners, shadow, borders, and label position.
Where the embed snippet works
Because the output is pure HTML with inline styles, it works in any environment that accepts custom HTML: Ghost, Webflow, Framer, MDX-based blogs, Astro, Hugo, Jekyll, and most CMS "raw HTML" blocks. For platforms that restrict HTML, host the snippet as a small static file and reference it through your platform's embed block.
The markup uses standard style attributes and inline color declarations, so it follows the same rules as any documented HTML styling pattern and avoids the security headaches of third-party scripts.
A typical workflow
- Build or import a palette using the Color Palette Randomizer or the Palette from Image extractor.
- Paste those HEX values into this widget builder and pick a layout.
- Validate accessibility with the Color Palette Contrast Grid before publishing.
- Copy the snippet and drop it into your CMS or Notion embed.
Why a static embed beats a hosted widget
Static HTML is faster — your readers do not wait on a third-party request — and it respects the WCAG principle that content should remain perceivable even when scripts fail. It is also better for SEO: search engines index the HEX codes and color names as plain text, which can earn featured snippets for palette queries.
If you need to export the same palette as design tokens for code, pair this widget with a HEX to Design Token Exporter run so your published article and your codebase stay in sync.