How to use the 60:30:10 color rule

What is the 60:30:10 rule?

Use a base color for roughly 60% of a design, a secondary color for 30%, and an accent for 10%. This is the same proportion as 6:3:1. The broad foundation sets the mood, the secondary color creates structure, and the small accent draws attention.

It is not a formula for counting exact pixels. Images, whitespace, text, and screen size all affect the visible area. Use the ratio to give three colors different priorities rather than letting them compete equally.

This principle is also used in interiors. For websites, it is more useful to think in terms of backgrounds, content areas, and primary actions than to map walls, furniture, and accessories directly onto a screen. See Sherwin-Williams on building a color palette for an interior-design example.

Where do the colors go on a website?

You do not need to divide the screen into three columns at 60%, 30%, and 10% width. The swatches in 631 color visualize the ratio; your actual page should follow its content.

An ivory, navy, and orange example

For a portfolio, try ivory across the background, navy for headings and major areas, and orange for a few key actions such as a contact button or selected navigation item. This is an editorial suggestion, not a fixed prescription.

If every link and decoration is orange, the most important action can lose its emphasis. Decide what visitors should do first, then start by applying the accent there.

A practical order for applying your palette

1. Choose a light or dark foundation. If the content is long, check that it feels comfortable to read over time.
2. Build structure with the secondary color. Use it for headings, surfaces, or divisions that need to stand apart from the background.
3. Give the accent one clear job. It might highlight a purchase button or the currently selected item.
4. Adjust on the actual screen. If the accent feels too dominant on mobile or text gets lost, revisit the area and lightness.

Browse all combinations and select a palette name to open the main swatches. Hover over a color to reveal its HEX code, or click to copy it. Use the preview to compare possible color roles.

Proportion and color harmony answer different questions

60:30:10 is about how much to use. Analogous, complementary, and triadic harmonies describe which colors to combine. Complementary hues can feel intense at equal sizes, while a balanced ratio can still leave text without enough contrast.

The chromatic palettes in 631 color use the digital HSL color wheel. Complementary relationships may differ from a pigment-based wheel. Explore the relationships yourself with the Adobe Color wheel.

Check text contrast separately

A bright accent may work beautifully as decoration and still be difficult to read as text on white. Check body text and button labels against their actual backgrounds.

WCAG AA calls for a minimum contrast ratio of 4.5:1 for regular text and 3:1 for large text. Large text generally means at least 18 pt, or 14 pt when bold. You do not have to restrict every piece of text to the three palette colors; black or white can provide readable text. See the W3C contrast guidance.

Frequently asked questions

Do I need to hit exactly 60%, 30%, and 10%?

No. First check whether the base occupies the broadest area and the accent the smallest. Adjust the balance for your content and screen size.

Must I use only three colors?

The rule organizes a design around three main colors. Text, photography, and status colors such as error or success do not all have to fit inside those three.

How do I send a palette to an AI?

Select “Copy for AI” on the main page to copy the HEX codes and proportions in one line. The AI prompt guide shows how to add roles to that starting point.