Color palette widget for any website or blog
This color palette widget builder turns your colors into a small block of HTML you can paste into a blog post, docs page or style guide. Pick colors, a layout and a label format, then copy the code. The snippet uses inline styles only, with no script and no iframe. It is free and needs no signup.
How to create an embeddable color palette widget
You can build a finished widget in under a minute. The preview always shows exactly what the embed code will render.
- Edit the colors in Colors and names. Type a HEX value, use the color picker, or press Add color to append another swatch (up to 16).
- Type an optional name in each row, such as "Primary" or "Warning". Drag a row's handle to reorder, or focus the handle and press the Arrow Up or Arrow Down key.
- Set a Widget title of up to 60 characters, or clear it to show no heading.
- Choose Row, Grid or List, then set the label format, label position, swatch size and background.
- Select Copy embed, or use the copy button next to the Palette Widget Embed Code box.
- Paste the snippet into a custom HTML block on your page and publish.
Not sure where to start? Load one of the four palette presets (Ocean breeze, Sunset glow, Forest walk or Candy pop) and adjust from there. You can also generate a random palette first and paste its colors in.
Palette widget settings you can control
- Layout: Row shows colors as one strip, Grid shows square tiles that wrap, and List shows a small swatch beside each label.
- Label format: show each color as HEX, RGB, HSL or OKLCH. Untick Color values or Names to hide either one.
- Label position: place labels below the swatch or on it. On-swatch text switches between black and white automatically, whichever is easier to read on that color. List layout always puts labels beside the swatch.
- Swatch size: Small, Medium or Large.
- Background: None (light page), White card, Dark card, or None (dark page) for sites with a dark theme.
- Style toggles: Rounded corners, Shadow, Border and a Credit link. The credit line reads "Made with 66colorful" and you can switch it off.
Which palette layout should you choose?
Choose Row for a compact brand strip, Grid for larger palettes, and List for documentation where each color needs a readable label. The table summarizes how the three layouts behave.
| Layout | Best for | Label position |
|---|---|---|
| Row | Short palettes of 3 to 6 colors in an article header | Below or on swatch |
| Grid | Palettes of 8 to 16 colors or large swatches | Below or on swatch |
| List | Style guides, docs pages and narrow sidebars | Beside swatch |
Every layout wraps on narrow screens, so the widget stays inside its container on phones.
HEX, RGB, HSL and OKLCH label formats explained
All four formats describe the same sRGB color, so you can pick whichever your readers use. HEX is the shortest and the most common in design handoff. RGB, HSL and OKLCH are written as CSS functions that you can paste straight into a stylesheet.
Here is one color from the default palette in three of the formats:
#3B82F6
rgb(59, 130, 246)
hsl(217, 91%, 60%)HEX stores red, green and blue as three two-digit hexadecimal pairs: 3B is 59, 82 is 130 and F6 is 246. See HEX vs RGB for when each notation fits. OKLCH expresses lightness, chroma and hue and is defined in the CSS Color Module Level 4 specification. If a reader pastes an OKLCH label into an older tool, an OKLCH to HEX converter gets them back to a six-digit code.
Why does the widget use inline styles and no iframe?
The widget uses inline styles because they travel with the snippet and work wherever HTML is accepted. An iframe loads a separate page, which adds a request, can be blocked by a site's security settings and does not resize easily. A script can be removed by a content filter. Plain HTML avoids all three problems.
The output is a semantic figure element containing a list of colors, with your title as its caption. Names and labels are escaped, so characters such as angle brackets or ampersands in a color name cannot break your page. If you hide a name or a value visually, the text stays in the code as screen reader text, so assistive technology still announces every color.
Where can you paste the embed code?
You can paste the snippet into any editor that offers a custom HTML or code-embed block. Typical places are WordPress, Ghost and Webflow, plus static pages and documentation sites that allow raw HTML.
Platforms that may strip the styles
Some editors and email tools remove inline styles or refuse raw HTML. If the widget looks unstyled after publishing, check that you pasted into an HTML block and not a visual text block. Use Download HTML to save a demo page with the widget, which is a quick way to confirm the code itself works before you debug your platform.
Palette widget tips and common mistakes
- Match the background to your page. Use "None, light page" on a light site and "None, dark page" on a dark one. Pick White card or Dark card when you want the palette to stand out as its own panel.
- Name colors by role. "Primary" and "Error" help a reader more than "Blue 2". The Names option can be turned off for a cleaner strip.
- Keep labels readable. On-swatch labels are small, so prefer labels below the swatch for pale or busy colors. Run text and background pairs through a contrast checker if your palette is meant for UI. WCAG 2.2 asks for at least 4.5:1 for normal text.
- Check the preview before you copy. Every change updates the preview and the code together, so scan the preview for a wrong color or a name that is too long.
- Do not rely on color alone. The visible values and names make the palette usable for readers who cannot distinguish the swatches.
Is an embedded color palette accessible?
An embedded palette is accessible when every color is available as text, not only as a swatch. The widget helps by outputting real HEX, RGB, HSL or OKLCH text and by keeping hidden names and values in screen reader text. Decorative swatches are hidden from assistive technology so a screen reader does not announce empty boxes.
You still control the visual side. Pick a dark or light background that matches your page, keep label text large enough, and avoid pale colors with on-swatch labels. The WCAG 2.2 contrast minimum is a useful target for any text you place over a color.
Share, download and copy the palette in other ways
Beyond the embed code, the quick actions under the preview give you more ways to use the palette. Copy palette copies the color values (with names if shown) in the label format you chose. Download HTML saves a standalone demo page. Share link copies a URL that restores your exact colors, names and settings, which suits teammates and clients. Reset returns the default five-color widget.
Click any swatch in the preview to open its color details. That is handy for checking a value before you publish.
Who uses an embeddable palette?
Designers show a brand palette inside a case study without uploading a screenshot, so the codes stay selectable and copyable. Developers add a color reference to a docs or design system page. Bloggers illustrate a color-theory post with real, accessible swatches. Teachers hand out a palette for a project and let students copy the codes.
Because the result is live text and not an image, it scales cleanly and stays editable after you paste it.
Build or refine your color palette before embedding
If your colors are not ready yet, pull a palette from an image, or use the color name finder to get readable names for each HEX code. To check the whole set for accessibility before embedding, run a palette accessibility audit.