How to Create a Beautiful Color Palette

A good palette isn't found by luck. It comes from a short process: decide what the colors need to do, choose one color you're sure about, build around it with a harmony rule, then test the result on a real design. These seven steps work for a website, a brand, a presentation or a room.

Step 1: Decide what the palette must do

Before you pick a color, write down where it will be used and the feeling you want. A banking dashboard and a children's toy shop need different things. Three or four words such as calm, trustworthy and modern are enough, and they give you something to judge choices against later.

Step 2: Choose one base color

Everything is easier from one color you're confident about. It might be an existing brand color, a color from a photo you love, or one you pick on the wheel. If you're stuck, use a photograph of something that has the mood you want and pull its colors out.

Step 3: Apply a harmony rule

Use a harmony rule to find colors that work with your base. Analogous gives a soft, unified feeling. Complementary or split complementary gives you a strong accent. Triadic is more colorful. Try several, because seeing the options side by side takes seconds.

Step 4: Add neutrals

Most of any design is background, surface and text, so a palette needs neutrals: an off-white, a light gray, a mid gray and a near-black. Neutrals look more refined with a slight tint of your base color than as pure gray.

Step 5: Balance with 60-30-10

Colors in equal amounts rarely look good. A popular rule of thumb is 60% for a dominant color, usually a neutral, 30% for a secondary color and 10% for an accent. The numbers aren't precise, but the idea is reliable: one color should clearly lead, and your accent should be scarce enough to mean something.

Step 6: Check contrast

A beautiful palette still has to be readable. WCAG, the web accessibility standard, sets a minimum contrast ratio of 4.5:1 for normal text and 3:1 for large text at level AA. Check each text and background pair you plan to use, not just the colors that look different to you. Don't rely on color alone to carry meaning either: add an icon or a label to errors and statuses.

Every palette's details page has an Accessibility tab that checks its color pairs against these limits, and the Contrast Checker tests any text and background pair you type in. If a pair fails, darken or lighten one color rather than replacing it.

Step 7: Test it on a real design

Swatches can mislead, because colors change next to one another and at different sizes. Put the palette on a website, an outfit or a room before you commit. If it feels too loud, lower saturation. If it feels flat, widen the gap between your lightest and darkest colors.

Common mistakes

• Using too many saturated colors, so nothing stands out.
• Choosing colors from swatches and never testing them in a layout.
• Skipping neutrals, which leaves no calm place for text.
• Using pure black text on pure white everywhere, which can feel harsh in large interfaces.
• Checking contrast only at the end, when changes are harder to make.

A quick recap

1. Define the purpose and feeling.
2. Pick one base color.
3. Apply a harmony rule.
4. Add neutrals.
5. Balance the amounts.
6. Check contrast.
7. Test on a real design.