Color Palette Creation: Balance With the 60-30-10 Rule

Good color palette creation is not about picking pretty colors at random; it is about planning how much of each color appears on the page and what role it plays. That is exactly why so many beginner palettes feel exhausting: three or four vivid colors compete with equal weight and the eye has nowhere to rest. In this guide we will apply a classic method that builds balance on its own — the 60-30-10 rule — step by step, and look at practical tools for testing your colors in a real interface.

What is the 60-30-10 rule?

The rule comes from interior design and describes color distribution in a composition as percentages. You split the colors in an area roughly like this:

• 60% — dominant color: backgrounds, large empty areas, the overall tone of the page. Usually a neutral or low-saturation color.
• 30% — secondary color: structural areas like cards, section backgrounds and navigation. It contrasts with the dominant color but does not fight for attention.
• 10% — accent color: buttons, links, calls to action. The most vivid and least-used color; that scarcity is exactly why it draws the eye.

These ratios do not need to be measured to the pixel. What matters is the hierarchy: one color leads, one supports, one sparks. As long as you use the accent sparingly, the user's eye naturally drifts to the important elements.

Step-by-step color palette creation

When building a palette from scratch, you can follow this order:

• 1. Start with a base color. Usually the easiest is to begin with the brand color or the tone you want to use as the accent. Think of it in HSL, like hsl(212, 90%, 50%).
• 2. Derive the neutrals. For the 60% dominant area, produce a very low-saturation gray-blue from the same hue (e.g. hue 212, saturation 8%). Slightly tinted neutrals add warmth that pure gray lacks.
• 3. Choose the secondary color. A hue close to the base (analogous) or directly opposite it (complementary). Analogous choices feel calm, complementary ones feel energetic.
• 4. Multiply the shades. Produce light-to-dark variations for each main color (like 50, 100, 200 … 900). In a real interface you will need these intermediate shades for hover, borders and shadows.
• 5. Verify the contrast. Test text and background pairs for accessibility (below).

Use the right tools

Building a palette by guesswork alone is tiring; free tools make it much easier:

• Coolors and Adobe Color — generate harmony schemes such as complementary, analogous and triadic from a color wheel.
• Figma — lets you save your palette as color styles or variables and reuse them consistently across the whole design.
• WebAIM Contrast Checker — measures the contrast ratio of two colors and shows WCAG AA/AAA compliance.
• Browser developer tools — the color picker in DevTools shows the contrast ratio instantly on the real screen.

Accessible contrast is mandatory

A beautiful palette is useless if it cannot be read. The WCAG standards require a contrast ratio of at least 4.5:1 for normal-size text and 3:1 for large text (roughly 24px, or 18.66px bold). When you use your accent color on a button, always check the contrast between it and the label on top. Using a low-contrast button just because it is the brand color causes users to miss the important action.

A practical habit: try the palette in both light and dark themes. A vivid yellow that looks great on light may glare on a dark background, so you may need to nudge the accent tone per theme.

Moving the palette into CSS variables

Once the palette is settled, the cleanest way to put it in code is CSS custom properties. You define them in one place and use them everywhere:

:root {
  /* 60% dominant / neutral */
  --bg: hsl(212, 8%, 97%);
  --surface: hsl(212, 10%, 92%);
  /* 30% secondary */
  --secondary: hsl(212, 30%, 35%);
  /* 10% accent */
  --accent: hsl(212, 90%, 50%);
  --accent-hover: hsl(212, 90%, 44%);
  --text: hsl(212, 15%, 15%);
}

.btn {
  background: var(--accent);
  color: white;
}
.btn:hover { background: var(--accent-hover); }

Instead of a separate hover variable, you can also derive it with a lightness function; in modern browsers color-mix() makes this easy: background: color-mix(in srgb, var(--accent) 85%, black);

Common mistakes

• Too many accent colors. More than two vivid colors usually leads to chaos; limit the accent to a single hue.
• Pure black and pure white. #000 and #fff look harsh; very dark and very light neutrals are softer.
• Information carried by color alone. Showing error/success only through red/green excludes color-blind users; back it up with an icon or text.

Frequently Asked Questions

How many colors should a palette have?

In practice 3 main colors (dominant, secondary, accent) plus a few light-to-dark variations of each are enough. You can add one or two status colors (success, warning, error). Limiting the number of main hues to three is the safest approach for most interfaces.

Do I have to hit the 60-30-10 ratio exactly?

No. The ratios are a hierarchy guide, not a target. What matters is positioning one color as dominant, one as supporting, and one as a rare accent. Keeping the percentages roughly by eye is enough.

What is the fastest way to start with color harmony?

The fastest is to start from a single brand color and generate a complementary or analogous scheme with Coolors or Adobe Color. Then you fine-tune the neutrals and contrast by hand.

Want a balanced, accessible color palette tailored to your brand? If you would like professional help with a logo, interface or brand identity, get in touch with me.