Free color palette generator widget for your website
Let your readers build a palette without leaving your page: they pick one base color and a color harmony, and the widget shows five matching colors with hex codes they can copy as a list or as CSS.
Live preview
This is the widget itself, running exactly as it will on your page.
Add it to your site
Copy the code below and paste it into an HTML block on your page (in WordPress, use a Custom HTML block; in Squarespace or Wix, an embed or code block). It is one frame and one line of credit. Nothing else loads on your page.
Start from your own color
Add ?c= and a hex code without the # to the frame's address to open the widget on your brand color, and &h= with a harmony name (analogous, complementary, split-complementary, triadic, tetradic or monochromatic) to choose the harmony. This version opens on a deep green with a triadic palette:
<iframe src="https://colorplum.com/embed/palette?c=2e6a3b&h=triadic" title="Color palette generator" width="100%" height="500" style="border:1px solid #d6d6d6;border-radius:8px;max-width:520px" loading="lazy"></iframe>
<p style="font-size:14px;margin:4px 0 0">Palette generator by <a href="https://colorplum.com/tools/color-palette-generator">ColorPlum</a></p>Who it is for
Design and web design courses, craft and quilting blogs, wedding and event planners, interior design pages, small brand studios and teachers who explain color theory all get asked which colors go together. A palette that the reader makes from their own starting color teaches the idea better than a fixed image, and it gives them codes they can use straight away in Canva, Figma, a website builder or a paint store's color matcher.
How the palettes are made
Harmonies rotate the base color's hue around the HSL color wheel, the convention color wheels and design tools use: the opposite hue for complementary, neighbors for analogous, three evenly spaced hues for triadic, and so on. Where a harmony gives fewer than five colors, the widget fills the row with lighter and darker steps of the base color, made in OKLCH so the steps look evenly spaced to the eye. Conversions follow the formulas in the W3C's CSS Color Module Level 4. The label on each swatch is pure black or pure white, whichever has the higher contrast ratio under WCAG 2.2, so it stays readable on any color.
The full palette generator adds locking, shuffling, a palette from a photo and a saved-colors tray; the contrast checker tests text on any pair; the methodology page explains every formula.
Terms
The widget is free for any site, commercial or not, and the palettes it makes are yours to use. We ask only that you keep the credit line under the frame. It carries no ads and sets no tracking cookies; we count how often it loads, as we do for our own pages (see the privacy policy). Questions or a problem with the widget: contact ColorPlum.