Color Palette Generator
Generate color palettes
Generate color palettes Runs locally in your browser
Complementary
#4ecdc4
#cd4e57
Analogous
#4ecd85
#4ecdc4
#4e96cd
Triadic
#4ecdc4
#c44ecd
#cdc44e
Split complementary
#4ecdc4
#cd4e96
#cd854e
Tetradic
#4ecdc4
#844ecd
#cd4e57
#97cd4e
Tints (towards white)
c3eeeb
88ddd7
4cccc3
2d9f97
1c635e
Shades (towards black)
278b84
1f6f6a
18544f
103835
081c1a
#4ecdc4 #cd4e57 #4ecd85 #4e96cd #c44ecd #cdc44e #cd4e96 #cd854e #844ecd #97cd4e #c3eeeb #88ddd7 #4cccc3 #2d9f97 #1c635e #278b84 #1f6f6a #18544f #103835 #081c1a
About the
The Color Palette Generator takes one base colour and derives the standard harmony schemes from it: complementary, analogous, triadic, split complementary and tetradic, plus a ramp of tints towards white and shades towards black. Harmonies are computed in HSL by rotating the hue while keeping saturation and lightness, which is why the results stay related to your base instead of drifting. The ramp is the part most palettes actually need, because a working interface needs several values of the same hue for hover, active and disabled states, not just one accent colour.
Where people use the
- Building a palette around a single brand colour.
- Producing hover, active and disabled variants from one accent.
- Exploring alternatives to a colour that failed a contrast check.
- Generating a neutral ramp for surfaces and borders.
How to use the
- 1
Pick a base colour
Enter a hex value such as 4ECDC4, or use the picker. Everything else is derived from this one colour.
- 2
Read the harmony schemes
Each scheme is a different hue rotation. Complementary is 180 degrees, triadic is 120 and 240, and so on.
- 3
Take the tint and shade ramp
Five tints towards white and five shades towards black give you the states and elevations you will need in a real interface.
- 4
Copy the values
The full list of generated hex values is in one block, ready to paste into a stylesheet or a design token file.
- 5
Check contrast before shipping
Run any text and background pair from the palette through the Contrast Checker. Harmonious is not the same as readable.
Tips and best practices
- Pick the base colour from the brand, then only adjust lightness for states.
- Reserve the complementary colour for the one action you want noticed.
- Always run the final pairing through a contrast check before shipping.
Frequently asked questions
What is the difference between the schemes?
Complementary uses the opposite hue, which gives the strongest contrast and suits a call to action. Analogous uses neighbours 30 degrees either side, which is calm and safe. Triadic spreads three hues evenly, which is lively and harder to control. Split complementary softens the complementary clash by using the two hues either side of the opposite. Tetradic uses four hues at right angles, which suits complex dashboards.
Why do the generated colours share the same saturation and lightness?
Because rotating only the hue is what keeps them recognisably related. Varying lightness at the same time produces colours that look unrelated, which defeats the point of a palette.
Are tints just the colour mixed with white?
Effectively yes, but computed in HSL by raising lightness while holding hue and saturation. That keeps the hue stable, whereas naive mixing in RGB drifts towards grey.
How many colours should a palette have?
For most interfaces, two or three hues plus a neutral ramp is plenty. A scheme with five saturated hues is difficult to use consistently and usually ends up looking accidental.
Does it check accessibility?
No, it only generates colours. Use the Contrast Checker on any pairing you intend to use for text.