How to Choose a Color Scheme: The 60-30-10 (70-25-5) Rule, Picking 3 Colors, and Tips That Prevent Mistakes

Short answer: a color scheme comes down to 3 colors, a 70:25:5 ratio, and lightness contrast

When you are stuck on colors, there are only three things to get right first: limit yourself to three colors with clear roles, give those three colors very different amounts of area, and keep enough difference in brightness (lightness contrast) between text and background. Following these three rules alone prevents most color-scheme mistakes.

Personal taste and “a sense for color” only start to matter once these three are in place. Put the other way around: even if you are not confident about picking colors, getting the number, the area, and the lightness contrast right will make your scheme look professional. The sections below go through how to decide each one.

The roles of the base, main, and accent colors

The basis of a color scheme is giving each color a role. Instead of lining up colors you like, you choose one color for the background, one for the star of the show, and one to grab attention. With clear roles, adding a new element is easy: you just ask which role it belongs to.

Text is not counted among the three colors because its job is to be read, not to create the scheme's impression. Keeping body text a dark, near-black color lets you secure readability without disturbing the scheme. Dark grays such as #333333 and #1F2937 have a contrast ratio above 12:1 against white, and many people find them easier on the eyes than pure black.

What is the 70:25:5 rule? Differences in area hold a scheme together

The 70:25:5 rule is a guideline for how much area the base, main, and accent colors should cover. The same idea is used in interior design and fashion and is widely known in design. The point is not the exact numbers but making a clear difference in area between the lead and the supporting colors.

The eye treats colors with similar areas as equally important. If main and accent are split 50:50, the viewer can't tell where to look and the whole design feels noisy. On the other hand, when the accent covers only a tiny area, the eye is drawn there naturally. The more you want something to stand out, the smaller the area you should give it.

• You don't have to measure the ratio precisely; “the base is overwhelmingly large and the accent is just a touch” is enough. It is also introduced as 60:30:10, but the idea is the same.
• On pages with many photos or illustrations, count the colors in the images as main or accent colors too. If the photos are vivid, keep the base and main colors restrained so the whole page stays calm.
• If the accent color keeps appearing in more places, the ratio is breaking down. Narrow it back to the one or two things you truly want to highlight.

5 steps to choose a color scheme

Here is the process for choosing a scheme from scratch. The order matters: decide the main color first, then the base, and the accent last. It is much faster and less confusing than starting by laying out random colors.

1. 1

   Put the impression you want into words

   Write down two or three words for how you want viewers to feel, such as “trustworthy,” “friendly,” “premium,” “energetic,” or “calm.” Having it in words keeps your criteria steady and helps when you explain the scheme to others.

2. 2

   Choose one main color

   Pick one hue that fits the impression and adjust its lightness and vividness. Navy or blue is a starting point for sincerity, green for nature, and orange or brown for warmth. Pure primaries such as #FF0000 or #0000FF are too strong as is; darkening them a little or lowering saturation makes them look refined.

3. 3

   Decide the base color

   If unsure, choose white (#FFFFFF) or a very pale off-white or gray. Using a very pale version of the main hue as the base (for example, a bluish gray like #F1F5F9 when navy is the main color) makes the whole design feel unified.

4. 4

   Decide the accent color

   Pick a color far from the main color on the color wheel. The complementary color (the opposite side) stands out most, while the two neighbors of the complement (split-complementary) are a little gentler. Since the accent is only used for buttons and highlights, it can be fairly bold.

5. 5

   Check readability and appearance with numbers

   Check the contrast ratio between text and background, and between button text and button color, and see whether body text reaches 4.5:1. Also check how the colors look with different types of color vision and whether they can be told apart in black and white. If something falls short, keep the hue and adjust only the lightness.

Of these five steps, the last one is hard to judge by eye. With the Color Palette Checker, just enter a text color and a background color to see the contrast ratio and the WCAG pass/fail result. If it falls short, the tool even suggests the closest passing color, found by moving only the lightness while keeping hue and saturation.

Color schemes from the color wheel: complementary, analogous, and triad

Once the main color is set, choosing the accent and secondary colors by their position on the color wheel gives you combinations that hang together. The color wheel arranges hues (red, yellow, green, blue, purple) in a circle, and the angle between colors changes the character of the scheme.

If this is your first scheme, “monochromatic plus one complementary accent” is the hardest to get wrong. Build the base and secondary colors from lighter and darker versions of the main color, and use the opposite hue only for the accent; you get both unity and a clear focal point. The properties of complementary colors, and why red's complement is said to be both cyan and green, are explained in What Are Complementary Colors?.

Match tones (lightness and saturation) and even more colors will look unified

A color is defined by three properties: hue (red, blue, and so on), lightness (brightness), and saturation (vividness). The combination of lightness and saturation is called “tone.” Most schemes that look mismatched have scattered tones, not bad hues.

• Pastel tones (light, low saturation): gentle and cute; suited to baby products and spring events
• Vivid tones (high saturation): energetic and pop; suited to sales and events for kids
• Dark tones: weighty, premium, grown-up; use white or light colors for text
• Grayish (muted) tones: calm and stylish; suited to natural brands and cafés

When the tones match, you can use four or five different hues and they will still look unified. This “same tone, different hues” approach is handy when you need color-coded charts or a different color for each category. Conversely, a pure primary blue next to a pastel pink looks out of place even with very few colors.

Preparing a few steps of the main color at different lightness levels is useful: pale backgrounds, divider lines, and hover colors for buttons can all come from one color. The “Tones by lightness” section of the Color Palette Checker shows five steps with the same hue and saturation as the base color and only the lightness changed.

Impressions colors give: a guide for choosing the main color

Colors carry impressions that many people share. They do vary with culture and personal experience, but they are a useful starting point for the main color. Even with the same hue, a lighter version feels lighter, a darker one feels heavier, and a less saturated one feels calmer.

Once you pick a main color, also try a lighter and a darker version. The same blue can feel fresh as a light sky blue, trustworthy as navy, and calm as a muted blue-gray. Searching for the lightness that matches your impression words gets you to an answer faster than changing the hue over and over.

Check readability with the contrast ratio

The most overlooked part of a color scheme is whether it can be read. Text that looks clear on your monitor can become unreadable on a phone outdoors, through a projector, or for someone with low vision when the lightness difference is small. The contrast ratio lets you check this with a number.

The contrast ratio compares the brightness (relative luminance) of two colors: identical colors give 1:1, and white against black gives the maximum, 21:1. WCAG 2.1, the international web accessibility guideline, sets the following values.

Comparing real colors shows how far your impression can be from the numbers. Bright colors such as yellow, orange, and light blue look vivid and eye-catching, yet they have very little lightness difference from a white background or white text.

When a pair falls short, you don't have to replace the color entirely. Keeping hue and saturation and only lowering (or raising) the lightness makes it readable with almost no change in impression. In the Color Palette Checker, #999999 text on white gets a suggestion of #757575 (4.60:1), and an orange button #FF7A00 with white text gets a suggestion to darken the background to #BD5A00 (4.53:1).

Account for different color vision: don't convey information by color alone

Color perception varies from person to person. In Japan, about 1 in 20 men and about 1 in 500 women are said to have color vision that makes colors such as red and green hard to tell apart (rates are similar in many other countries). When choosing colors, assume that the differences you see are not seen the same way by everyone.

• Pairs with similar lightness, such as red and green, orange and yellow-green, or blue and purple, become hard to distinguish.
• Don't convey meaning by color alone (“red means error,” “green means done”); make it distinguishable by icons, text, or line shapes as well.
• Give chart series differences in lightness, not just hue. If they can be told apart when printed in black and white, they can be told apart with most types of color vision.
• Writing labels right next to chart lines or bars works more reliably than a legend placed far away.

In the “Color vision simulation” tab of the Color Palette Checker, you can enter up to eight colors and compare how they look with protan (type 1), deutan (type 2), and tritan (type 3) vision and in grayscale; combinations that are easy to confuse are listed with their color-difference values. Concrete fixes for documents and charts are covered in Color Schemes for Color Vision Diversity.

Color scheme examples by use, with color codes and contrast ratios

Here are ready-to-use schemes for different purposes. Each one has a base, main, accent, and text color, and readability has been checked with the contrast ratio. The ratio for white text on a main-color button is included too.

Instead of pure white, using an off-white that carries a hint of the main or accent color softens the whole design. The café example's #FFF8F0 and the beauty example's #FFF5F7 do this, adding more warmth than plain white paper or a white screen.

As in the kids example, some accents only reach the 3:1 range with white button text. In that case, either make the button text large and bold so it falls under the “large text” standard (3:1), or use the accent only for decorations and icons without text on them. That keeps the energetic feel while staying readable.

Common color scheme mistakes and how to fix them

When in doubt, try converting the whole design to black and white (grayscale). If headings and body text, and buttons and backgrounds, are still clearly distinct, your lightness design is working. Where elements melt together in black and white, fix it by separating the lightness rather than by adding more color.

How to choose a color scheme with the Color Palette Checker

Everything above can be checked in one place in your browser with the Color Palette Checker. All calculations run in the browser, and the colors you enter are never sent to a server.

1. 1

   Enter the main color in “Text color / base color”

   Besides color codes like #1E40AF, it reads rgb() and hsl() notation. You can also pick a color with the color picker.

2. 2

   Look at accent candidates in the “Color schemes” tab

   It shows complementary, analogous, split-complementary, triad, and tetrad colors, plus five tones by lightness. Click a color to copy its color code.

3. 3

   Check text and background in the “Contrast” tab

   Enter a text color and a background color to see AA/AAA pass or fail for normal text, large text, and UI components. If it falls short, the closest passing color with only the lightness changed is suggested.

4. 4

   Check distinguishability in the “Color vision simulation” tab

   Press “Load the base color’s scheme” to bring in the scheme's colors at once, then confirm that no easily confused combinations remain.

5. 5

   Keep the results with the share URL or copy buttons

   The colors you entered are kept in the share URL, which is handy for sending a color proposal to your team. You can also copy the results or the whole scheme as text.

If you want to feel complementary afterimages with your own eyes, the Color Afterimage Illusion tool is a good companion. It lets you experience why complementary colors placed side by side make your eyes flicker.

FAQ

What is the 70:25:5 color rule?

It is a guideline that a scheme holds together when the base color covers about 70% of the area, the main color about 25%, and the accent color about 5%. You don't need to follow the numbers strictly; what matters is that the base is overwhelmingly large and the colors you want to stand out cover the least area. It is also known as the 60-30-10 rule.

How many colors should a color scheme have?

The basic set is four: base, main, and accent, plus a text color for body copy. When you need more colors, such as for charts, match the lightness and saturation (tone) and change only the hue, and the colors will still look unified.

What's the difference between a main color and an accent color?

The main color is the lead that sets the overall impression and is used over larger areas such as headings and headers. The accent color draws the eye and is used only in very small places, such as buttons and key numbers. Choosing an accent far from the main color on the color wheel makes it more effective.

Can I make a good color scheme without an eye for color?

Yes. Limiting yourself to three colors, keeping the 70:25:5 area ratio, matching tones, and making text-to-background contrast 4.5:1 or higher prevents most mistakes. Once you pick one main color, the rest can be chosen mechanically from positions on the color wheel.

Which text and background color combinations are easy to read?

On a white background, dark gray text such as #333333 or #1F2937 reads well, both with a contrast ratio above 12:1. Under WCAG 2.1, body text should be at least 4.5:1 against its background, and large text of 24px or more at least 3:1. Light gray (#999999) on white is only 2.84:1 and falls short.

Is white text on an orange or yellow button OK?

In most cases it becomes hard to read. White text on orange (#FF7A00) is only 2.61:1, and on yellow (#FFFF00) just 1.07:1. Darken the button color slightly or use dark text instead of white. Text in #1F2937 on a #F59E0B button reaches 6.83:1.

Complementary colors make my scheme too loud. What should I do?

Reduce the area of one of them so it stays an accent, or lower the saturation of one. A split-complementary scheme, which uses the two neighbors of the complement, stands out without clashing as much. Text and background in complementary colors tend to flicker, so it is safer not to use them for text.

Can I use the same color scheme on the web and in print?

Generally yes, but some vivid screen colors (RGB) can't be reproduced in print (CMYK), and bright blue-greens and fluorescent colors in particular look dull. For print, specify CMYK colors as your printer requires and check with a test print. The CMYK values in the Color Palette Checker are for reference and can't be used for print submission as is.

How do I make a color scheme that works for different types of color vision?

Avoid pairs with similar lightness such as red and green, and make information distinguishable not only by color but also by lightness differences, icons, text, and line shapes. Checking that everything can still be told apart in black and white is a simple sign that it works for most types of color vision.