#6366F1
#F1EE63
How to use
01
Set a base color
Pick with the swatch or type a hex value like #6366F1 into the text field. Every harmony recalculates from this single input the moment it changes.
02
Click through the harmony tabs
Complementary, Analogous, Triadic, Split, and Monochromatic each show their swatches in a grid, with the hex code printed under every color for quick reference.
03
Copy one color or all of them
Each swatch carries its own copy button, and the Copy all button puts the entire palette on your clipboard as a comma-separated list of uppercase hex codes.
Why Color Palette Generator
- All major color harmony rules in one tool.
- Runs entirely in your browser.
- Outputs ready-to-use HEX codes.
Common questions
What harmonies can this palette generator produce?
Five: complementary (the base plus its 180 degree opposite), analogous (neighbors at 30 degrees either side), triadic (three hues 120 degrees apart), split (the base plus hues at 150 and 210 degrees), and monochromatic (five lightness steps of one hue).
How does the tool generate color combinations from one hue?
It converts your base to HSL, rotates the hue by fixed angles, and keeps saturation and lightness untouched. That's why it can generate color combinations that feel like siblings: they differ only in hue, the property harmony rules care about.
Which generated palette works best for a website?
Analogous schemes make calm backgrounds and section colors, while a complementary pair gives you one confident accent against your main hue. Many sites combine both: analogous colors for structure, the complement reserved for buttons and links.
Does the monochromatic palette change hue at all?
No. It keeps your exact hue and produces five steps: two brightened versions, the base, and two darkened versions. That makes it ideal for card backgrounds, borders, and hover states that need to feel like one family.
Why do my generated palette colors look washed out?
The harmonies inherit the saturation of your base, so a muted base yields a muted scheme across every tab. Feed in a more saturated starting color, then tone individual swatches down afterward if needed.
Can I use this palette generator for chart series?
Triadic and split schemes work well because their hues are far apart, which keeps series distinguishable. Before shipping, run the picks through the Color Contrast Checker so labels and fills hold up against your chart background.
Is a split palette different from a complementary one?
Yes. Instead of the exact 180 degree opposite, split takes the two hues flanking it at 150 and 210 degrees. You keep most of the contrast of a complement but the pairing vibrates less, which is easier to live with in large areas.