How to Build a Color Palette for Your Website or Brand

Reviewed September 22, 2026 · By HueWiz

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

Use 60-30-10 as a rough starting point for visual emphasis, not a required formula for 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.

A worked example: a blue website palette

Open the website workspace with #3B82F6. Keep the starting theme on Light and select Generate. The primary stays blue while HueWiz creates supporting roles. You can edit any role before exporting.

1. Use surface for the page background and text for body copy.
2. Use primary for the main action, secondary for a supporting panel, and accent for occasional emphasis.
3. Inspect the interface preview and each contrast result. Button and card text use black or white automatically; manually edited surface text may need Fix text on surface.
4. Choose CSS variables, Tailwind v4, or Color tokens JSON in Export. Use Copy code or Download. Share palette includes all five edited colors; Save locally keeps one palette in this browser.

Here is the default blue palette as CSS. The separate button text token matters: white on #3B82F6 is about 3.68:1 and fails normal-text AA, while black is about 5.71:1. Always check the foreground and background you actually render.

:root {
  --color-surface: #F5F9FF;
  --color-ink: #141B26;
  --color-primary: #3B82F6;
  --color-secondary: #D2E2FC;
  --color-accent: #B2511E;
  --color-on-primary: #000000;
}
body { background: var(--color-surface); color: var(--color-ink); }
.primary-button {
  background: var(--color-primary);
  color: var(--color-on-primary);
}

Check another text/background pair or use the Tailwind generator for eleven related shades. Contrast results apply to individual pairs, not every state of a whole website.

Starting from a photo instead

Open the image palette generator and choose a JPG, PNG, or WebP. The image is analyzed locally. Select an extracted color to build the five roles, then refine and export them in the same workspace. A photo summary may not reproduce an exact brand color; use your brand's specified hex code when precision matters.

How many colors does a website need?

Start with five roles, not necessarily five distinct hues. Two roles can share a color, and a neutral can cover most of the page. Add extra colors only when they serve a clear purpose, such as an error state, and check their contrast separately. Browse named color codes if you need a starting point.

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.