How to Build a Color Palette for Your Website or Brand

Updated September 10, 2026

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: from a blue base to CSS roles

This is an illustrative workflow using HueWiz, not a claim that one palette suits every brand. Open the picker with #3B82F6, then scroll to the Palette Mixer. It builds five roles: surface, primary, secondary, accent and ink.

1. Keep the primary role as your starting color and inspect the generated surface and ink together in the preview.
2. Adjust brightness or contrast and watch the contrast checks. Check the actual text/background pair rather than assuming the whole palette is accessible.
3. Choose an accent for emphasis, then send the palette to the Playground to inspect the colors together.
4. In the Mixer, select Copy as CSS. The result contains named custom properties such as --surface, --primary and --ink.

For a concrete contrast check, #3B82F6 against white is about 3.68:1, below the 4.5:1 minimum for normal text at WCAG AA. Against black it is about 5.71:1. These values use the WCAG relative-luminance calculation; they do not certify a complete interface. Read the contrast guide before applying the palette to text and buttons.

Starting from a photo instead

Open Image Colors and choose a photo or screenshot. Select an extracted color and choose Open selected color in Mixer to develop a palette around it. To keep the suggested image roles together, use Send roles to Playground. Extraction summarizes the image; use your original brand specification when exact brand colors are required.

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.