Color Palette Generator
Pick a base colour, choose a harmony rule, get a balanced palette. With the contrast figures attached, so you find out here rather than in code review that your accent fails on white.
Seven rules
Analogous, complementary, triadic, tetradic, split-complementary, square and monochromatic — each a different spacing of hues around the wheel.
Contrast built in
Every swatch carries its ratio against black and white, so an unusable accent is obvious before it reaches a stylesheet.
Colour-blindness preview
Simulates protanopia, deuteranopia and tritanopia. A palette that relies on red against green stops working for roughly 1 in 12 men.
Copy-ready code
Hex, RGB, HSL and CSS custom properties, ready to paste. Palette history lives in your browser only.
A harmony rule is a starting point, not an answer. It spaces hues evenly, which is not the same as balancing them — a pure yellow and a pure blue at identical saturation will not carry equal visual weight.
Nothing is uploaded and nothing is stored on our servers. Clearing your browser storage clears your palette history, and we cannot recover it, because we never had it.
Frequently asked questions
Is this free?
Yes — no account, no export limit, no watermark.
Does anything get uploaded?
No. It runs entirely in your browser. Palette history uses your own localStorage and never leaves the device.
Which harmony rule should I use?
Analogous for calm, related schemes; complementary when you need one colour to stand out; triadic for something livelier that still holds together. Monochromatic is the safest starting point for interfaces.
Will these colours pass accessibility checks?
The contrast figures shown tell you. For a full check of a specific foreground and background pair, use the contrast checker.
Related tools
Check a specific pair with the colour contrast checker, blend your palette into a CSS gradient, or specify it for manufacturing with the CMF spec sheet generator. For full-featured colour software, browse the directory of 473 tools.