Color Palette Generator
Pick a base color, choose a harmony rule — monochromatic, analogous, complementary, triad, tetrad — and get a balanced scheme in one click. Roll random palettes with the spacebar, lock the colors you love, check contrast, and copy HEX or ready-made CSS variables.
Drag the big dot — around for hue,
towards the center for saturation
Gradient from this palette
Drag the stops, click the track to add one, double-click a stop to drop itPalette from a photo
The image is read in your browser — nothing is uploadedLive preview
A palette you can actually ship
Headline, body copy, buttons and cards — all painted with the colors above, so you can see how the scheme behaves before it reaches your design file.
Vision simulation is an approximation — always confirm critical UI with a real contrast check.
Color harmony rules at a glance
| Rule | Hue angles | Colors | Best for | Preview |
|---|
How to use this tool
-
1
Set your base color — drag the wheel, type a HEX code, or open the system picker. Everything else recalculates instantly.
-
2
Choose a harmony rule and a variation (pastel, soft, hard, deep…), then set how many colors you need — from 2 to 10.
-
3
Press Generate palette or hit Space for a fresh random scheme. Lock the swatches you want to keep before rolling again.
-
4
Click any swatch to copy its HEX, or grab the whole set with Copy HEX list / Copy CSS variables.