Color Scheme Generator

Generate complementary and analogous palettes

How to Build a Color Scheme

  1. Choose a base color. Click the swatch and pick the color your design is built around — a brand color, or whatever you want to anchor the palette.
  2. Click Generate. Matching palettes are worked out from that color and shown below.
  3. Compare the results. Each scheme takes a different approach, so look at which one suits the mood you're after.
  4. Take the colors you need. Copy the codes into your stylesheet or design file.

What This Tool Does

Choosing one color is easy. Choosing four that work together is the hard part, and it's where a lot of designs come unstuck. This generator starts from a single color you've already committed to and works out the colors that relate to it — following the same principles designers use with a color wheel, but without the manual arithmetic.

Everything runs entirely inside your browser, with nothing to install or sign up for.

Complementary vs. Analogous

These two schemes pull in opposite directions, and knowing which you want saves a lot of second-guessing. Complementary colors sit across from each other on the color wheel — blue and orange, red and green. The contrast is strong, which makes them excellent for a call-to-action button that needs to stand out against the page. Used in large amounts, though, they compete for attention and can feel jarring, so the usual approach is one dominant color with its complement reserved for accents.

Analogous colors sit next to each other on the wheel — blue, blue-green, green. Because they share a family resemblance, they feel calm and cohesive, which suits backgrounds, gradients, and any design where nothing should shout. The trade-off is that they don't create much contrast on their own, so a purely analogous palette can look flat until you add a darker or lighter value for emphasis. Whichever you pick, check text and background pairs with the Contrast Checker before you commit — a scheme can be beautiful and still be unreadable.

Frequently Asked Questions

Which scheme should I use for a website?

A common approach is an analogous base for the overall feel, with a complementary accent for buttons and links. That gives you a calm page where the things you want clicked still stand out.

How many colors should a palette have?

Fewer than you'd think. One dominant color, one accent, and a couple of neutrals will carry most designs. Extra colors tend to make a layout look busier rather than richer.

Can I use these colors for text?

Check the contrast first. A scheme is built from relationships between hues, which says nothing about whether a given pair is readable when one is text on the other.

Where do I get a base color to start from?

Use your brand color if you have one. Otherwise, pick something visually with the Color Picker, or pull a color out of a photograph with Image Color Extract.