Color palette generator: five matching colors from one
Enter a base color and pick a harmony (analogous, complementary, split complementary, triadic, tetradic or monochromatic) to get five colors. Lock any you like, shuffle the base hue for new ideas, and copy the hex codes or CSS variables.
Get a palette from a photo
Drop an image here, paste one, or choose a file. It stays on your device.
- #543F8C
- #7B3F8C
- #8C3F77
- #F7E9FC
- #380046
On this page
Starting a palette from nothing is hard. Starting from one color you already have, such as a logo, a favorite sweater or a photo, is much easier. This generator takes that one color, builds a set of five around it, and lets you keep the ones that work.
How the five colors are chosen
You set two things: a Base color and a Harmony. The harmony decides which hues come first. Analogous uses neighbors on the color wheel, complementary the opposite hue, split complementary the two beside the opposite, triadic three evenly spaced hues, tetradic four, and monochromatic keeps one hue and varies its lightness.
Most harmonies give fewer than five colors. The tool fills the remaining slots with extra steps at the same hue: a very pale tint, a very dark shade, and if more are needed, two in between. The pale and dark colors are useful because a real design needs a background and a text color as well as accents.
Lock, shuffle, copy
- Lock under a color keeps that exact code even when you change the harmony or the base. Use it to hold the colors you like while you explore the rest.
- Shuffle the base hue jumps the base to a new hue at the same lightness and saturation, in OKLCH, and rebuilds the set.
- Copy hex codes gives the five codes separated by commas; Copy CSS gives five custom properties named
--palette-1to--palette-5.
The starting color is a plum, #7B3F8C. With the analogous harmony it gives #543F8C, #7B3F8C, #8C3F77, #F7E9FC and #380046.
Worked example
Your team is building a slide deck for an offsite and wants a purple theme. Start with the plum and the analogous harmony. Use the near-black #380046 for titles on the pale #F7E9FC background, where the pair measures 14.33:1. The blue-purple #543F8C makes a good title bar with white text at 8.51:1, and the red-purple #8C3F77 is a clear accent for charts, with white text at 6.79:1. Lock those, then press Shuffle the base hue a few times to see whether a second theme appeals. Because locked colors stay put, you only lose the unlocked ones.
Checking the result
A palette that looks good can still fail on text. White on #F7E9FC is only 1.16:1, so never put light text on the pale color. Paste your picks into the contrast checker before they go into a template. To see a color's lighter and darker steps in more detail, open the shade and tint generator, and to see how its hues relate, use the color wheel.