Color palette generator
Start from one color you love and let harmony rules do the rest. Pick a scheme, get five matching shades, and copy the hex codes straight into your design or stylesheet.
Click any swatch to copy its hex code. Press the spacebar for a fresh random base.
How to build a palette
Set your anchor color
Type a hex code or use the swatch to choose the one shade your project has to include — a brand color, a photo tone, anything.
Pick a harmony
Analogous feels calm, complementary pops, triadic is playful. Each rule places the other colors at proven angles around the wheel.
Copy what you need
Tap a swatch to copy its hex. Reroll with the button or the spacebar until a combination clicks, then take the codes with you.
The color harmonies, explained
Every scheme here comes from the color wheel — a circle of hues from 0 to 360 degrees. Harmony rules are just recipes for how far apart the colors should sit, and they work because the relationships are mathematical, not a matter of taste.
Analogous
Neighbors on the wheel, roughly 30 degrees apart. They share an underlying tone, so the result feels cohesive and relaxed — ideal for backgrounds and gentle gradients.
Complementary and split-complementary
Complementary colors sit directly opposite, 180 degrees apart, for maximum contrast and energy. Split-complementary softens that by using the two hues either side of the opposite, keeping the punch while easing the tension.
Triadic and tetradic
Triadic spreads three hues evenly at 120-degree steps for a balanced, vibrant set. Tetradic uses four colors in two complementary pairs — rich and flexible, but usually best with one color leading and the rest as accents.
Monochromatic and shades
These keep a single hue and vary only its lightness and saturation. They are the safest way to build a UI scale — think buttons, hovers and borders that clearly belong to the same family.
Questions people ask
How do I copy a color?
Click or tap any swatch in the palette and its hex code is copied to your clipboard. A small confirmation appears at the bottom of the screen.
Can I start from a specific brand color?
Yes. Type the exact hex into the base field or pick it with the swatch, then choose a harmony. Every generated color is derived from that anchor.
What does the random button do?
It picks a fresh, pleasant base color and rebuilds the palette with your current harmony. Tapping the spacebar does the same thing.
Which harmony should I choose?
For a calm, unified look go analogous or monochromatic. For contrast and calls-to-action try complementary. Triadic and tetradic suit bold, colorful designs.
Are the palettes accessible?
Harmony rules control hue relationships, not text legibility. Before pairing two colors for text, run them through the contrast checker to confirm they meet WCAG ratios.
Is anything uploaded?
No. Palettes are generated with color math directly in your browser. Nothing is sent anywhere and the tool works offline once loaded.