Does Generate fill empty cards?

All eight palettes already have starter colors. Generate rewrites unlocked stripes from the seed and harmony.

Yes. Display-referred sRGB, not Display P3 or Lab.

Why is Eyedropper missing?

Firefox and some privacy modes omit EyeDropper. Type the hex instead.

Is this an accessibility checker?

No. These are design palettes, not a WCAG contrast tool.

Palette Generator

Loading tool…

About Palette Generator

The grid is eight palettes of five stripes. It opens with light blues, greys, and other starter sets already filled. Set a Seed (hex or the color well), pick a Harmony, and click Generate to rewrite unlocked stripes. Hover (or tap) a stripe to widen it and read the hex. Click a stripe to copy that hex. HEX and CSS in the output box copy the selected card.

Colors are sRGB, not Display P3 or Lab. This is not a WCAG contrast checker. There is no hex-to-RGB form on this page. Old /developer/palette-generator style URLs resolve here.

How to use Palette Generator

1Pick a seed. Type a hex or use the color well. Eyedropper appears when the browser supports it.
2Choose a harmony. Analogous, Complement, Split, Triadic, Tetradic, Mono, or Shades.
3Click Generate. Unlocked stripes rewrite. Lock a stripe on desktop hover to keep it.
4Copy colors. Click a stripe for that hex, or copy the selected card as HEX or CSS.

Harmonies and lock

Harmony names: Analogous, Complement, Split, Triadic, Tetradic, Mono, Shades. Each rule places extra hues relative to the seed on the color wheel, plus a lightness offset so the five stripes are not clones. On a phone Harmony is a dropdown; on larger screens it is a bar.

Lock (desktop hover) keeps a stripe through Generate. Spacebar also runs Generate when you are not typing in a field. Eyedropper appears only if this browser has EyeDropper (Chrome does; Firefox often does not). CSS copy is :root variables --color-1 through --color-5.

Limits and privacy

Generation is local math in your browser. Nothing is uploaded. No account. Closing the page drops the palettes.

FAQs

What is a harmony?: A rule for placing extra hues relative to the seed on the color wheel, plus a lightness offset so the five stripes are not clones.
Does Generate fill empty cards?: All eight palettes already have starter colors. Generate rewrites unlocked stripes from the seed and harmony.
sRGB only?: Yes. Display-referred sRGB, not Display P3 or Lab.
Why is Eyedropper missing?: Firefox and some privacy modes omit EyeDropper. Type the hex instead.
Is this an accessibility checker?: No. These are design palettes, not a WCAG contrast tool.