How to Build a Color Palette for Your Website or Brand

Updated June 28, 2026 · 6 min read

A good palette is not a random collection of colors you like; it is a small, deliberate system where every color has a job. Here is a repeatable process for building one that holds together.

Step 1: Start with one base color

Resist the urge to pick five colors at once. Choose a single base color first — often this comes from a brand, a logo, a photograph, or simply a mood you want to set. Everything else in the palette will be derived from this anchor, which is what keeps the result coherent.

Step 2: Choose a harmony

Decide how the supporting colors relate to your base. The harmony you pick sets the overall feeling:

• Want a calm, unified look? Use analogous or monochromatic colors.
• Want a bold accent that pops? Use a complementary or split-complementary color.
• Want variety while staying balanced? Try a triadic scheme.

This single decision does most of the heavy lifting, because it tells you exactly which colors to consider next instead of leaving you staring at the whole spectrum.

Step 3: Apply the 60-30-10 rule

A classic interior-design rule translates perfectly to screens. Split your palette by proportion: roughly 60% a dominant color (often a neutral or your base), 30% a secondary color, and 10% an accent. The accent is where a vivid complementary color earns its keep — used sparingly, it draws the eye to buttons and key actions without overwhelming everything else.

Step 4: Don't forget neutrals

Most real palettes lean heavily on neutrals — near-blacks, off-whites and greys — with color used as punctuation. Neutrals give the eye somewhere to rest and make your accent colors feel more intentional. A common mistake is making every element colorful; the colors then compete and none of them stands out.

Step 5: Check contrast

Before you commit, make sure text remains readable on every background you plan to use. Pairing two colors with similar lightness looks stylish in a swatch but becomes unreadable as body text. Aim for a clear contrast between foreground and background — this is both an accessibility requirement and simply good design.

Step 6: Build tints and shades

A palette of pure hues is rarely enough for a real interface. For each color, generate a few lighter tints and darker shades by adjusting lightness. These give you hover states, borders, disabled buttons and subtle backgrounds — all clearly related to the original color.

Common mistakes to avoid

• Too many colors. Three or four well-chosen hues beat a rainbow almost every time.
• Equal weighting. If everything is emphasised, nothing is. Use proportion.
• Ignoring context. Test colors in a real layout, not just as swatches side by side.
• Skipping contrast checks. A palette that fails on readability fails, full stop.

Put it together

Pick a base, choose a harmony, assign proportions with 60-30-10, add neutrals, verify contrast, and expand into tints and shades. Follow that order and you will end up with a palette that is not just attractive but actually usable across an entire site.