How to Apply a Color Palette to Any Design

Finding five colours that look good together is the easy part. The tricky part is using them: which one becomes the background, which goes on buttons, and how do you stop the result from looking like a box of crayons? A palette only works when each colour has a clear job. This guide explains how to assign roles, balance proportions, keep text accessible and turn hex codes into a system you can reuse across a website, a slide deck or a brand.

Give Every Colour a Role

Before you paint anything, label each colour in your palette with a job:

• Background: a light or dark neutral that fills most of the space.
• Surface: a slightly different shade for cards, panels and sections.
• Text: a colour with strong contrast against the background.
• Primary: your brand colour for key elements such as headers or links.
• Accent: the colour that says “click me” — buttons and highlights.

If your palette has no suitable neutral, add a near-white or near-black. Most interfaces need far more neutral space than bright colour.

The 60-30-10 Rule

Interior designers have long used a simple proportion guide that translates well to screens:

• 60% dominant colour — usually the background or main neutral.
• 30% secondary colour — surfaces, sections, larger shapes.
• 10% accent colour — buttons, icons and details that should stand out.

The numbers are approximate, not a law. The point is hierarchy: if every colour gets equal space, nothing stands out. Keeping the accent rare is what makes it effective.

Using the Color Palette Generator in Your Workflow

The tool on this page opens in Harmonious palette mode with five related colours, each with its hex code. A practical workflow:

1. Generate harmonious palettes until one matches the mood of your project.
2. Use the Palette menu to explore alternatives — Pastel for soft tones, Vivid for energy, Dark for deep shades, Named colors or Fully random.
3. Adjust How many? (1 to 60) if you want a larger swatch library to choose roles from.
4. Copy single hex codes or the whole palette, or export it as CSV, JSON or TXT.
5. Assign each colour a role from the list above, then build a quick mock-up to test the balance.
6. Save the share link so your team can reopen the tool with the same settings.

Check Contrast Early

A palette that looks lovely as swatches can fail when text sits on top. The Web Content Accessibility Guidelines (WCAG) recommend a contrast ratio of at least 4.5:1 for normal body text and 3:1 for large text at the AA level. Use a contrast checker on every text and background pair you plan to use, including text on buttons.

Also avoid relying on colour alone to communicate meaning. Pair a red error state with an icon or a message, so people with colour vision deficiencies still understand it.

Turn Hex Codes Into Design Tokens

Once roles are decided, store them as named variables rather than scattering hex codes everywhere. In CSS that means custom properties:

:root { --color-bg: #FAF7F2; --color-accent: #C02E26; }

Name variables by role, not by appearance — --color-accent rather than --red — so you can change the accent later without renaming anything. The same idea works in design tools that support shared styles, and it makes adding a dark theme far easier.

A Quick Example

Imagine a five-colour palette for a small bakery website: cream, warm beige, chocolate brown, terracotta and sage green. Assigned roles might look like this:

• Cream — page background, the dominant 60%.
• Warm beige — cards and footer, part of the 30%.
• Chocolate brown — headings and body text, chosen for strong contrast on cream.
• Sage green — illustrations and section dividers, the rest of the 30%.
• Terracotta — the “Order now” button and sale badges, the 10% accent.

Every colour has a job, so the page feels calm yet guides the eye straight to the button.

Pro tips

• Test your palette in grayscale to check that the hierarchy still reads.
• Use slightly tinted neutrals instead of pure grey for a warmer feel.
• Limit the accent to one or two colours.
• Document each colour’s role and hex code in a one-page style guide.

Frequently asked questions