Primary, Secondary, and Accent Colors

Every strong brand palette is organized by job, and the core jobs are primary, secondary, and accent colors. The primary is the color people remember you by. The secondary supports it and adds range. The accent is the small, bright spark that pulls the eye to the one thing that matters most on a screen. Get these three roles right and your whole design feels intentional.

This guide is for designers, founders, and developers who keep hearing these terms but want a clear, practical definition of each. I will define every role, explain how many colors a brand actually needs, give you a roles table you can apply today, walk through real examples, and show how the famous 60-30-10 balance keeps it all in proportion. Let us sort out who does what.

What you'll learn

• What primary, secondary, and accent colors each do
• How many colors a brand really needs
• A roles table you can apply to your own palette
• How the 60-30-10 rule balances them
• Real examples of the roles in action

Primary, secondary, and accent colors defined

Before we get to counts and ratios, let us nail down what each role means. These are not just three colors, they are three jobs.

Primary color

The primary is your signature color. It carries the most brand recognition and shows up most often, on your logo, your main buttons, and your key links. When someone pictures your brand, this is the color they see. It should be distinctive and usable across light and dark surfaces.

Secondary color

The secondary supports the primary and gives the palette room to breathe. It appears in sections, illustrations, secondary buttons, and supporting graphics. It should harmonize with the primary, not compete with it. Think of it as the primary's partner, present but never louder.

Accent color

The accent is the spark. It is used sparingly to draw attention to one important thing, like a call to action, a badge, or a highlight. Because it is rare, it is powerful. If you use the accent everywhere, it stops being an accent and becomes noise.

How many colors does a brand need?

The honest answer is fewer than most people expect. A focused brand can run on a primary, a secondary, and an accent, plus neutrals and a few functional colors. More than that and the system starts to feel scattered.

The trap is confusing the number of colors with the number of shades. You do not need ten different hues. You need a few hues, each expanded into a full scale of shades from light to dark. One hue with eleven shades gives you backgrounds, borders, and text without adding a new color.

So count hues, not shades. Most brands land happily at two or three hues, each turned into a scale. That is enough for variety without losing focus. For the shade side of this, see our Tailwind color scale guide.

Do not forget neutrals and functional colors

The three brand roles get the attention, but two more groups quietly do most of the work. Skip them and your palette looks pretty in isolation and falls apart in a real interface.

Neutrals

Neutrals are your grays, used for text, borders, backgrounds, and surfaces. They make up the majority of most screens. A small touch of your brand hue mixed into the grays makes them feel custom rather than generic. Build them as a scale just like the brand colors.

Functional colors

Functional colors carry meaning. Success is green, warning is amber, and error is red. These are not optional, since every app needs to confirm, caution, and alert. Tune them so they sit with your brand, but keep them recognizable, because users rely on these conventions.

This table is the whole system on one page. Three brand roles, one big neutral role, and three functional roles. The Zepixo Colors workspace generates each of these as a full OKLCH scale. See the roles documentation for how it maps them.

The 60-30-10 balance

Knowing the roles is half the job. The other half is proportion. The classic rule of thumb is 60-30-10, which keeps the three colors in a pleasing balance rather than an even split.

The idea is that about 60 percent of a design uses a dominant color, often a neutral or a soft tint of the primary. Around 30 percent uses a secondary color. And about 10 percent uses the accent. The uneven ratio is what makes it feel designed rather than busy.

You do not have to measure pixels. Treat 60-30-10 as a feel, not a formula. If your accent is showing up everywhere, you have drifted from 10 toward 40, and the design will feel loud. Our 60-30-10 color rule guide goes deeper on applying it.

Real examples of the roles

Theory lands better with examples. Here are three small systems that show the roles working together.

A calm SaaS dashboard

Primary is a trustworthy indigo #5b5bd6 on the main buttons and links. Secondary is a sky blue #0ea5e9 used in charts and section headers. The accent is a warm amber #f59e0b, reserved for the single upgrade button. Neutrals carry the dense data tables.

A bold consumer app

Primary is a vivid coral #f43f5e on the main call to action. Secondary is a deep plum #7c3aed in illustrations and empty states. The accent is a bright lime #84cc16, used only on streak badges. The contrast between coral and plum gives energy, and the lime is the reward color.

A minimal portfolio

Primary is near-black ink #1e293b for almost everything, which keeps it elegant. There is barely a secondary, just a soft gray. The accent is a single electric blue #2563eb on links and the contact button. With so little color, the one accent carries real weight.

Want to assign these roles fast? Open the Zepixo Colors workspace to set primary, secondary, and accent, generate each as an OKLCH scale, and preview them on real UI before you commit.

How to choose each color

Picking the three is easier with a small process. Start with the primary, since everything hangs off it.

Choose the primary first

Pick a hue that fits your brand's feel and works as a button and a link. It needs enough contrast against white and against a dark surface. If you have a logo, your primary often comes straight from it. Our color palette from a logo guide shows how.

Derive the secondary with a harmony

Use a color harmony from the primary to find a secondary that naturally agrees with it. An analogous hue feels calm, while a triadic hue feels lively. Our color harmonies explained guide covers the options.

Pick an accent that pops

The accent should stand apart from the primary so it grabs attention. A complementary hue, sitting across the wheel from the primary, is a reliable choice. Keep it for the rare moments you want the eye to land.

Keep contrast in mind for every role

A role is only useful if it is readable. Your primary button needs a text color that passes contrast, and your accent badge needs the same. Assigning a role does not excuse a color from the contrast check.

Run all your roles through a contrast grid that tests every shade against every other. Aim for 4.5 to 1 for body text under WCAG, and use the grid to find which shade of each role works as text or as a background. See our accessible color system guide for the method, and the WCAG contrast minimum for the source.

This is where roles and scales meet. The role tells you what a color is for, and the scale tells you which shade to use so it stays readable. Together they turn a few hues into a system you can trust.

Frequently asked questions

What is the difference between primary, secondary, and accent colors?

The primary is your signature color, used most and tied to recognition. The secondary supports it and adds range without competing. The accent is a rare, bright color used to draw attention to one key thing like a call to action.

How many colors should a brand have?

Most brands do well with two or three hues, plus neutrals and functional colors. Count hues, not shades, since one hue expanded into a full scale covers many jobs. More than three or four hues tends to feel scattered.

What is the 60-30-10 rule?

It is a balance guide. About 60 percent of a design uses a dominant base color, 30 percent uses a secondary, and 10 percent uses the accent. The uneven split keeps a design feeling intentional rather than busy.

Should the accent be the brightest color?

Often yes. The accent works by standing apart, so a bright, distinct hue draws the eye well. A complementary color across the wheel from your primary is a reliable choice. Just use it sparingly so it keeps its impact.

Do neutrals count as part of the palette?

Absolutely. Neutrals carry most of a real interface through text, borders, and surfaces. Build them as a scale and mix a touch of your brand hue in so they feel custom. A palette without good neutrals falls apart in practice.

Are success and error colors part of the brand palette?

They are functional colors that live alongside the brand roles. Every app needs them to confirm, caution, and alert. Tune them to sit with your brand, but keep green, amber, and red recognizable, since users depend on those conventions.

Define the three roles, add your neutrals and functional colors, balance them with 60-30-10, and check contrast. Do that and your palette will feel deliberate at every turn. You have got this.