Generate a color palette.
Five colors that go together — every one with a name. Lock the ones you like, regenerate the rest, and copy the palette as CSS.
How the palettes are made
Every palette starts from one base color. The other four are placed at set angles from it on the color wheel — the same rules designers use by hand: neighbors (analogous), opposites (complementary), or thirds (triadic). Then each color gets its own step of lightness, from dark to light, so the set reads as one family instead of five strangers.
Each color is matched to the nearest of 31,000+ named colors. A name like "Dusty Coral" is easier to talk about, easier to remember, and easier to put in your code than a hex number.
How to use a five-color palette
A simple rule that works: 60-30-10. Your main color covers about 60% of the design (usually the lightest one, as the background), a support color covers about 30%, and an accent covers the last 10% — buttons, links, highlights. The two remaining colors are for borders, hover states and text.
Before you ship it, test your text and background pair in the contrast checker — a palette that looks good but fails WCAG will come back to bite you.
Sharing and saving
The palette lives in the page address. Copy the URL and the exact five colors go with it — send it to a teammate or bookmark it for later.
Want to know more about one color? Click its name to open its page, with codes in every format, shades, and the colors it goes with. Or look up any color by name in the color name generator.