What is the 60-30-10 colour rule?

It is a rule of thumb for balancing colour: about 60% of the visible area uses a dominant colour, 30% a secondary colour and 10% an accent. On a website that usually means background, section and card colours, and buttons or links.

Which colour should be the 10% accent?

Usually the most saturated colour in your palette, often the brand colour. Use it for primary buttons, links and highlights only, so those elements stand out.

Does the 60-30-10 rule include text colour?

Normally no. Body text is a dark or light neutral chosen for readability. Check it against the background for a contrast ratio of at least 4.5:1 for normal text under WCAG level AA.

Do I have to use all five colours from a palette?

No. Pick the ones that fill the dominant, secondary and accent roles, and use the others sparingly, for example for hover states or illustrations.

The 60-30-10 Colour Rule for Websites: How to Apply a Palette

The short answer

The 60-30-10 rule splits a design's colour into three shares: about 60% for a dominant colour (usually the page background and large surfaces), 30% for a secondary colour (cards, sections, navigation, body text areas) and 10% for an accent (buttons, links and highlights). To use it, generate a palette from your brand colour in the Color Palette Generator, pick one colour for each role, and keep the accent rare so it draws the eye to the actions that matter.

The percentages describe visual area, not an exact measurement. They are a rule of thumb borrowed from interior design, useful because they stop a site from looking either flat or chaotic.

What each share does

Share	Role	Typical places on a website
60%	Dominant	Page background, large empty space, main content area
30%	Secondary	Header, footer, sidebars, cards, section backgrounds, headings
10%	Accent	Primary buttons, links, active tabs, badges, key icons

Text colour usually sits outside the split. Body text is a dark neutral (near-black or dark grey) on a light background, or a light neutral on a dark one, chosen for readability rather than for the palette.

Why the accent should be the smallest share

The accent works because it is rare. If the brand colour is used for the background, the header, the buttons and the icons, nothing stands out and visitors cannot tell what to click. Keeping the strongest colour to around a tenth of the page makes "Sign up" or "Buy now" the obvious next step.

Step by step: from palette to page

1. Generate a palette

Open the Color Palette Generator.

Click the Base color box and choose your brand colour.

Pick a Harmony type: Analogous, Complementary, Triadic, Monochromatic or Random. Each one returns five colours.

Click any swatch to copy its HEX code, or press Copy all HEX codes to copy all five, separated by commas. The RGB value is shown under each swatch.

Which harmony to start with:

Monochromatic gives lighter and darker versions of the base colour. It is the safest choice for a calm, professional site because everything belongs to one hue.
Analogous gives neighbouring hues (the tool uses steps of 15 and 30 degrees around the colour wheel). Good for friendly, cohesive designs.
Complementary in this tool includes the colour opposite your base (180 degrees) along with nearby hues. The opposite colour makes a strong accent.
Triadic includes hues 120 and 240 degrees away, plus two in between. It is lively and harder to balance, so keep two of the five out of large areas.

2. Assign the three roles

A reliable pattern for a light website:

60%: a very light colour. Often white or an off-white. If your palette has no light enough colour, use the lightest monochromatic swatch or a light neutral.
30%: a mid or soft colour from the palette. Used for section backgrounds, cards or the header.
10%: the most saturated colour. Usually the brand colour itself or its complementary partner.

For a dark theme, flip the first share: a very dark colour takes the 60% and the accent stays bright.

3. Write the colours as CSS variables

Naming colours by role, not by hue, makes later changes painless:

:root { --color-bg: #ffffff; --color-surface: #e8edfe; --color-accent: #4f6ef7; --color-text: #1f2937; }

Then use background: var(--color-bg); on the page, var(--color-surface) on cards and var(--color-accent) on buttons and links. If you change the brand colour later, you edit one line.

4. Check contrast before you ship

Colours that look fine together can still be hard to read. Two checks matter most:

Body text on the background. The Web Content Accessibility Guidelines (WCAG) level AA asks for a contrast ratio of at least 4.5:1 for normal text and 3:1 for large text.
Button text on the accent. White text on a light or yellow accent often fails. Try dark text, or darken the accent.

The palette generator does not calculate contrast, so test your final pairs in a contrast checker before publishing.

A worked example

Starting from the generator's default base colour #4f6ef7 (a medium blue) with the Monochromatic harmony gives a set of lighter and darker blues. One way to apply it:

Role	Colour choice	Used for
Dominant (60%)	White	Page background
Secondary (30%)	Lightest blue swatch	Hero section, cards, footer
Accent (10%)	`#4f6ef7`	Primary buttons and links
Text	Dark grey	Headings and body copy
Hover state	Darker blue swatch	Button hover and focus

The darker swatches are useful for hover and pressed states, so the accent stays within one family.

Applying the rule to common layouts

Landing page

White background (60%).
A soft palette colour behind the hero and one feature section (30%).
One accent colour for the main button, repeated for every call to action on the page (10%).

Blog or help centre

Mostly background colour, because reading comfort matters most.
Secondary colour for the header, sidebar and code or quote blocks.
Accent only for links and the subscribe button.

Dashboard or web app

Neutral background and secondary surfaces do most of the work.
Reserve the accent for the primary action and the active navigation item.
Use separate, conventional colours for status (for example red for errors and green for success) rather than palette colours, so their meaning stays clear.

Common mistakes

Using all five palette colours equally. A palette is a menu, not a rule that every colour must appear. Many good sites use two palette colours plus neutrals.
Making the accent the background. It tires the eyes and leaves nothing to highlight buttons.
Different blues for links on different pages. Pick one accent value and reuse it.
Ignoring dark mode. If your site supports it, define a second set of the same variables rather than inverting colours automatically.
Choosing colours on one screen only. Check the result on a phone in daylight, where low-contrast pairs fade quickly.

Related tools and guides

To make lighter tints of your accent for backgrounds, see How to Make Lighter Tints of a Colour. To convert between HEX, RGB and HSL, use the Color Picker. For gradients built from your palette, the CSS Gradient Generator writes the CSS for you, and the background on colour harmony and brand colours is in Color Palette Generator: How to Choose Brand Colors.