How to build a color palette that actually works
A good palette is not a pile of pretty colors — it is a base, a harmony, and a rhythm of lightness that repeats predictably. Here is the method.
1. Start from one base color
Pick a single brand or anchor color and commit to it. Everything else is derived from it, which is what makes the palette feel intentional. Grab one in the Color Picker or paste a hex you already love.
2. Choose a harmony
Harmonies are fixed angles on the color wheel that reliably look good together:
- Analogous (neighbours) — calm and cohesive.
- Complementary (opposite) — high energy, great for accents.
- Triadic / split-complementary — vibrant but balanced.
See them all for your base in Color Harmonies, or let the Palette Generator apply them with a lightness rhythm built in.
3. Set a lightness rhythm
A palette reads best when it runs dark → light in even steps. Generate a 50–950 scale from your base in the Tint & Shade Generator so you have a token for every surface, border and text level.
4. Check contrast before you ship
Pair your text and background tokens and confirm they pass WCAG in the Contrast Checker. A palette that looks great but fails contrast is not done.
Frequently asked questions
How many colors should a palette have?
A base, one or two accents, plus a neutral scale (50–950). Five hues is plenty for most products; the scale gives you the rest.
What is the 60-30-10 rule?
A layout guideline: ~60% a dominant/neutral color, ~30% a secondary, ~10% an accent. It keeps accents impactful rather than overwhelming.
Where do I get the tints and shades?
Generate them from your base in the Tint & Shade Generator — it produces 10 tints, 10 shades and a ready-to-paste Tailwind 50–950 scale.