How to Choose a Color Palette

1. Start with one color

Choose an anchor: a brand color, a color from a photo or product, or one you simply like. You can pull a color from an image with the image color extractor (your image stays in your browser), pick one with the color picker, or browse named colors. For the examples below the anchor is royal blue, #4169E1.

2. Pick a harmony

A harmony gives you more colors that belong together. The right one depends on the feeling you want:

• Monochromatic (one hue, several lightness levels) is calm and unified. It is the easiest to keep consistent.
• Analogous (neighboring hues) is harmonious and gentle, with a little more variety.
• Complementary (opposite hues) is energetic. Royal blue and its complement #E1B941 make a strong pair.
• Triadic and tetradic give the most variety. Use one color as the leader and the others in small amounts.

The color theory guide shows each harmony for this same blue, and the palette generator builds them instantly.

3. Give every color a role

A palette is easier to use when each color has a job instead of just a name. A typical set looks like this:

Only one or two colors in a palette should be bright. Everything else is neutral or a status color. The classic 60-30-10 proportion (mostly a neutral, some secondary color, a little accent) is a useful starting point.

4. Build scales for each color

Real interfaces need more than one shade of each color: a hover state, a pressed state, a pale background and a border. Generate a scale of lighter and darker steps for the colors you use most. For royal blue, five shades are #3658BC, #2B4696, #213571, #16234B and #0B1226, and five tints are #6182E6, #809BEB, #A0B4F0, #C0CDF5 and #DFE6FA. The tints and shades generator creates them for any color.

5. Check contrast

This is the step that is most often skipped. For each text color on each background it appears on, check the ratio: at least 4.5:1 for normal text and 3:1 for large text and interface parts. In the table above every pairing was checked, and one result shows why it matters: royal blue as text on the off-white background reaches only 4.51:1, which barely passes. A shade slightly darker would be safer for small text. The contrast checker tests any pair, and the contrast guide explains the thresholds.

6. Test with real users in mind

• Color blindness. View the palette in the color blindness simulator. Pairs that depend only on a red-green difference often fail.
• Different lightness. A quick check: if you convert the design to grayscale, can you still tell the important parts apart?
• Different screens. Look at it on a phone and a laptop, and in bright and dim light.
• Dark mode. If you offer it, pick a second set of values instead of simply inverting the first.

7. Export it

Name your colors by role, not by hue, so you can change the actual value later without renaming everything:

:root {
  --color-primary: #4169E1;
  --color-accent: #E1B941;
  --color-background: #F7F7F2;
  --color-text: #1F2937;
  --color-error: #B3261E;
  --color-success: #2E7D32;
}

The palette generator exports the same set as CSS variables, JSON, SVG or PNG so you can paste it into your project or share it with a team.

Common mistakes

• Too many hues. Three or four hues plus neutrals is plenty. More starts to look random.
• Colors with the same lightness. They look flat and become indistinguishable for some color-blind users. Vary the lightness.
• Pure black on pure white. It works, but a near-black on an off-white is often more comfortable for long text.
• Color as the only signal. Pair status colors with icons or words.
• Choosing from swatches only. Always try the palette in a real layout before you decide.