How Many Colors Should a Palette Have?

Type “how many colors in a palette” into a search bar and you’re hoping for an actual number, not another lecture on color theory. Here’s one: most working palettes run on four to six colors — one base, one accent, and two or three neutrals — before anything gets stretched into tints and shades. Past that count, you’re either solving a specific problem, like a chart with a dozen data series, or you’re stalling.

How Many Colors Are in a Palette?

Open ten random design systems and count only the colors doing real work — not the tints, not the hover states, just the hues a designer chose on purpose. You’ll land between three and six almost every time. New designers tend to grab eight or nine hues because more feels like more options. In practice it just means more decisions every time someone adds a button.

Rule of thumb: 1 base + 1 accent + 2–3 neutrals = 4–6 colors for most sites and apps. Anything past that should earn its place.

What a Real Color Palette Is Made Of

A palette isn’t a flat list of hex codes. It’s a small set of jobs, and each job usually gets one color. The base — sometimes called the dominant or primary color — carries most of the surface: headers, primary buttons, the color people associate with the brand. The accent is reserved for what needs attention: a link, a highlight, a call-to-action button. Neutrals do the quiet work of backgrounds, borders and body text, and they usually outnumber every other color combined.

Then there’s a smaller, optional layer: state colors. Success, warning, danger and info each get a fixed color so a pattern only has to be learned once — green worked, red didn’t — and it stays true from screen to screen. State colors aren’t part of the brand. They’re closer to traffic signals: consistent because the convention already exists, not because anyone designed it from scratch.

Add it up and a mature, fully-loaded system looks like this: one base, one accent, two to four neutrals, and up to four state colors. That’s the honest number of colors in a color scheme once a product has shipped for a year or two — somewhere around eight to ten named colors. It’s a ceiling most teams grow into, not a list to start from.

Do Neutrals and State Colors Count Toward the Total?

Ask a designer to list their palette and most stop after naming the base and the accent — neutrals and state colors rarely make the mental list, even though they’re doing just as much work. Neutrals get skipped because nobody experiences gray as a choice; a background, a border and a line of body text register as “no color,” not as three decisions someone made on purpose. That’s a convenient blind spot, but it’s still three or four swatches sitting in the same stylesheet as the base and the accent.

State colors get skipped for a different reason: they’re borrowed, not designed. Green for success and red for error existed before your product did, so reaching for them barely feels like a choice. Success, warning and error each need their own solid-and-soft pair to clear WCAG contrast, which turns four “obvious” hues into six or eight real swatches once light and dark variants get counted separately. None of this makes the earlier four-to-six number wrong — it’s still the right count of colors a person chose on purpose. It just means the total sitting in a real stylesheet always runs a few swatches past the one anyone remembers picking.

How Many Colors Should a Website Use?

The Minimalist Case: Two or Three Colors

One confident accent on top of two or three neutrals isn’t a compromise. For documentation sites, portfolios, text-heavy blogs and most SaaS marketing pages, restraint reads better than range. A single hue plus a warm-to-cool neutral pair — an off-white and a near-black, say — covers almost everything a reader actually looks at: is this a link, is this a button, is this just body copy.

Starting minimal is also just safer when you don’t know the answer yet — you can bolt on a second accent the day you actually need one for something specific, like a promo banner. Ship six colors before launch, though, and the first redesign six months later usually burns a week deciding which three never got used.

Landing Pages vs. Dashboards: Same Question, Different Math

The right count also depends on what the product is, not just how minimal you want it to look. A SaaS marketing homepage usually has three surfaces worth naming — hero, body, footer. One accent carrying every call-to-action, one neutral for text, one for the background: that’s the whole job, and a fourth color just competes with the first three for attention nobody’s giving it twice.

A dashboard is a different product wearing the same word “palette.” A revenue chart with six product lines needs six distinguishable series colors, since hue is the only variable free to do that job — position and shape already belong to the axes. That’s the ceiling mentioned above for a reason: past six or seven, series colors start blurring together no matter how carefully they’re picked, so dashboards lean on sorting, small multiples or a highlight-one-gray-the-rest pattern instead of a ninth hue. Add status colors for alerts and a couple of chart-only neutrals for gridlines, and a dashboard’s honest total can still land past a dozen. The gap with a landing page isn’t restraint — it’s how many named surfaces each one has to cover.

How Many Accent Colors Do You Actually Need?

Usually one. A second accent earns its keep only once the first is already doing a specific job — a primary call-to-action, say — and something unrelated needs its own distinct signal, like a promo badge or a secondary action that shouldn’t compete for attention. Two is the practical ceiling for most interfaces. By three, users stop trusting any of the accents to mean something specific, because none of them do anymore.

When to Expand Past Three

A few situations genuinely call for more hues. Multi-brand or white-label products need a base per brand, not one base stretched to cover all of them. Editorial and portfolio sites built around photography can run a looser system, since the imagery carries the personality and the interface just gets out of the way. Charts are their own case: once a graph plots more than a handful of categories, extra hues are the only way to tell the series apart — though every color added past six or seven makes the chart harder to scan, not easier.

Not sure which second or third hue actually pairs with your base? Drop it into the Harmony tool and compare complementary, triadic and split-complementary options before committing to anything.

Counting Colors for Real: One Base Becomes a Scale

Here’s the part that trips people up. Even a lean four-color palette isn’t four hex codes in production. Every color needs room to get lighter for a background tint, darker for a pressed state, somewhere in between for a hover. Tailwind’s default palette handles this by stretching each named color into an eleven-step scale, 50 through 950 — so “blue” in a real codebase means eleven specific shades of blue, not one.

So when someone asks how many colors a palette really has, there are two honest answers. Conceptually: four to six, the ones a person actually chose. Technically: dozens, once every base and accent gets expanded into its own scale for buttons, borders, hovers and backgrounds. Neither answer is wrong. They’re just answering different questions.

--color-base:    #5B5BD6;  /* 1 base   */
--color-accent:  #F0A03C;  /* 1 accent */
--neutral-50:    #F6F6F3;  /* lightest */
--neutral-200:   #E7E6E0;
--neutral-800:   #2C2C31;
--neutral-950:   #131316;  /* darkest  */

Why an 11-Step Scale Isn’t 11 Colors

It’s tempting to read that eleven-step Tailwind ramp as eleven colors and feel guilty about the count. It isn’t, and the reason matters: nobody picks blue-50 through blue-950 as eleven separate decisions. One anchor hue and one lightness curve generate the whole scale algorithmically — the same way choosing a typeface generates regular, bold and italic without three separate type decisions. The decision was choosing the blue. The scale is that one decision, rendered at every lightness a UI could plausibly need.

That’s also why a base color’s scale never competes with the accent’s scale for a reader’s attention the way two full extra hues would. A ramp reads as one color at different volumes, not a chorus of new ones — which is exactly why a lean four-color palette can stretch into forty-plus CSS variables without the page looking any busier than it did with four flat swatches.

Common Mistakes That Inflate the Count

Most palettes don’t grow past six colors on purpose. They drift there one reasonable-sounding decision at a time. A few patterns show up often enough to name.

• The rainbow palette — every section gets its own accent because variety felt “visually interesting.” It reads as indecision instead: nothing tells the eye what’s clickable when everything is a different color.
• Accent overload — a second accent gets added for one banner, a third for one badge, and within a few sprints there are five colors all technically “accents” with no rule for which one to reach for next.
• One-off stakeholder colors — a single campaign or a favorite executive shade gets bolted on for one launch and never removed, because deleting a color feels riskier than leaving it unused.
• Gradient stops treated as new colors — a two-stop gradient is one decision, not two, but both stops tend to get reused separately elsewhere, quietly becoming colors nobody planned for.
• Dark mode as an unrelated second palette — picking new hex values from scratch instead of deriving dark-mode values from the same base scale is the fastest way to double the count overnight.

Decide Your Count in Four Questions

Skip the debate over whether five colors is “enough” and answer these instead — the number tends to fall out on its own.

1. How many surfaces does this actually have? Count the real areas someone will look at — hero, nav, card, footer for a marketing site; panel, sidebar, chart, table for a dashboard. Each needs a background and a text color, not necessarily a new hue; most surfaces share the same two or three neutrals.
2. How many things need to compete for a click? Count the actions that genuinely compete for attention on one screen — usually one primary, sometimes one secondary. That’s your accent count, and it’s rarely more than two.
3. Does anything need a fixed, learned meaning? If a state has to mean the same thing every time — paid versus overdue, live versus draft — it gets a color from the success/warning/error/info set, not one invented for this feature alone.
4. Will this ever plot more than a handful of categories at once? If yes, that’s the one legitimate reason to add hues past base-plus-accent-plus-neutrals — everything else on this list should stay inside that count.

Build and Test the Count With Paleta’s Tools

The fastest way to find your real number isn’t to guess it. It’s to generate a few options and count what survives contact with an actual layout.

Generate ten full palettes at once in Palettes. Each result already ships as a working base-plus-accent-plus-neutrals set, so you’re counting a finished system instead of designing one from a blank swatch.

Once a direction feels right, open its full breakdown. That’s where the base expands into its scale, where you can add or delete individual swatches, and where the count stops being theoretical — you’ll see, cell by cell, whether that fifth color is doing anything the other four weren’t.

Fine-tune every swatch, check contrast between pairs, and export the finished set as CSS variables or a Tailwind config in Palette Details.

If these colors are going into a real product and not a one-off page, the last step is naming what you kept. Turning a base, an accent, a couple of neutrals and a state color or two into named roles is what keeps the count from creeping back up six months from now.

Map the finished palette to roles in the Design Token Generator, so blue becomes --color-primary and nobody quietly adds a ninth hue by accident.