How does the color palette generator work?

Pick a scheme and press Generate, or tap the space bar. Each scheme places colors at fixed positions on the color wheel relative to a base hue, then spreads them across a range of lightness so the palette has somewhere light and somewhere dark to work with.

How do I keep a color I like?

Press the padlock on that color. Locked colors stay exactly where they are while everything else regenerates, so you can build a palette one color at a time rather than waiting for all five to land at once.

Can I share a palette?

Yes. The address bar updates as you go, so copying the link is enough. Copy link puts it on your clipboard, and anyone opening it sees the same five colors.

How do I use these colors in CSS?

Copy CSS gives you the palette as custom properties on the root element, ready to paste into a stylesheet. Every individual hex can also be copied by clicking it.

Which color scheme should I choose?

Monochromatic is the safest and hardest to get wrong. Analogous is calm and cohesive. Complementary and triadic give you more contrast but need one clear dominant color, or they compete. Auto picks a scheme at random if you would rather be surprised.

Can I see the palette on a real layout?

Yes, below the strip. The preview assigns each color a job by measurement, lightest to the background, darkest to the text, the most vivid middle color to the button, and renders a small page with them, in light or dark arrangement. WCAG contrast ratios for the pairs the layout actually uses are shown underneath, and a failing pair opens in the contrast checker.

Color palette generator

Press the space bar and keep the colors you like. A color palette generator builds a set of colors that work together by placing them at fixed positions on the color wheel, then spreading them across a range of lightness so the palette has somewhere to put text and somewhere to put a background.

Check contrast Make a gradient

Press Space to generate. Lock a color to keep it while the rest change.

Change color 1
Change color 2
Change color 3
Change color 4
Change color 5

The palette on a page

Yourbrand

Every color here has a job

This deal is one of 8 readable ways to hand the jobs out. Mix the roles to see the next one; the ratios below follow along.

Get started

A card on the surface colorIts text is whichever palette color reads best here.

WCAG 2.1 ratios for the pairs the layout actually uses. A failing pair opens in the contrast checker, which suggests the nearest passing version of the color.

The schemes, and when to reach for each

Harmonies are positions on a wheel rather than matters of taste, which is why they keep working across very different designs.

Auto

Picks a scheme at random each time. The fastest way to find something unexpected.

Analogous

Neighbours on the wheel. Calm and cohesive, and hard to get wrong.

Complementary

Opposite hues. Maximum contrast, best with one clear dominant color.

Split complementary

The base plus both neighbours of its opposite. Contrast that is easier to balance.

Triadic

Three hues evenly spaced. Lively and confident.

Monochromatic

One hue across five lightnesses. Effortlessly tidy, and the safest place to start.

Common questions

How does the color palette generator work?: Pick a scheme and press Generate, or tap the space bar. Each scheme places colors at fixed positions on the color wheel relative to a base hue, then spreads them across a range of lightness so the palette has somewhere light and somewhere dark to work with.
How do I keep a color I like?: Press the padlock on that color. Locked colors stay exactly where they are while everything else regenerates, so you can build a palette one color at a time rather than waiting for all five to land at once.
Can I share a palette?: Yes. The address bar updates as you go, so copying the link is enough. Copy link puts it on your clipboard, and anyone opening it sees the same five colors.
How do I use these colors in CSS?: Copy CSS gives you the palette as custom properties on the root element, ready to paste into a stylesheet. Every individual hex can also be copied by clicking it.
Which color scheme should I choose?: Monochromatic is the safest and hardest to get wrong. Analogous is calm and cohesive. Complementary and triadic give you more contrast but need one clear dominant color, or they compete. Auto picks a scheme at random if you would rather be surprised.
Can I see the palette on a real layout?: Yes, below the strip. The preview assigns each color a job by measurement, lightest to the background, darkest to the text, the most vivid middle color to the button, and renders a small page with them, in light or dark arrangement. WCAG contrast ratios for the pairs the layout actually uses are shown underneath, and a failing pair opens in the contrast checker.

All tools