Without JavaScript the controls below are disabled, and no palette is built.

Palette Generator

One color in, a set of related colors out, each with the arithmetic that produced it. Geometry on the color wheel, not taste.

The rule is shownNothing is stored

What the schemes are

A color wheel arranges hues in a circle, and these schemes are positions on it. Complementary takes the hue directly opposite, which gives the strongest contrast of hue. Analogous takes the neighbors, which is why those sets look calm — they are nearly the same color. Triadic spaces three hues equally, and split complementary softens the opposite pair by stepping either side of it.

Tints and shades keep the hue and move the lightness instead, which is how you build the light and dark variants of a single brand color. Each swatch here says how it was reached — +180° hue, lightness +30% — so nothing about the result is mysterious.

What a palette is not

These are geometric relationships, not design advice. A triadic set of fully saturated hues is technically correct and usually horrible; most good palettes come from picking one of these as a starting point and then pulling the saturation and lightness around by hand. The tool has no opinion, and it should not: it does arithmetic on a wheel.

It also says nothing about legibility. Two colors can be perfectly related and still unreadable together — check any pair you plan to put text on with the Contrast Checker.

Working with the result

Every swatch shows its HEX value, which you can type straight into a stylesheet or into the Color Converter to get it as RGB or HSL. Two of them dropped into the Gradient Generator give you a blend with copyable CSS.

Lightness is held between 5% and 95%, because a tint that reaches pure white or a shade that reaches pure black is no longer a variant of anything.

Note

Everything is calculated in your browser from the one value you type. Nothing is sent anywhere, nothing is kept, and no palette is stored between visits.

All color utilities

See the category →

Swatches preview a tool’s default color or pattern. Some tools do not have a swatch.