Color palette generator
Pick a base color and a harmony to get a matching palette, ready to copy as HEX or CSS variables.
How it works
The base color is turned into hue, saturation and lightness. The other colors keep the saturation and step the hue around the color wheel: ±30° for analogous, 180° for complementary, 150° and 210° for split complementary, 120° steps for triadic and 90° for tetradic. Monochrome keeps the hue and changes lightness.
Frequently asked questions
What are the palette types?
Complementary uses the opposite hue (high contrast). Analogous uses neighbouring hues (calm). Triadic and tetradic space three or four hues evenly around the wheel (lively). Split complementary takes the two hues next to the opposite one. Monochrome keeps one hue and changes lightness.
How do I use a palette on a website?
Pick one color for buttons and links, one or two for accents, and keep large areas neutral. Copy the palette as CSS variables and check text colors with the contrast checker.
Why does “random” give different colors each time?
It picks a random base hue and keeps the chosen harmony, so the colors still fit together.