How to Build a Color Palette: 60-30-10 & Beyond

From a harmony scheme to a working palette: dominance, accents, and the mistakes that flatten a design.

Short answer: a working palette is a harmony scheme plus decisions. You choose which hue dominates, which supports it, and which accents, using the classic 60-30-10 split, then decide how value and saturation vary inside each role. A scheme hands you hues; a palette gives those hues jobs. Most weak palettes fail not at hue selection but at that job assignment.

Start with the job, not the swatch

Before picking any color, name what the palette must do: calm or energize, feel warm or cool, whisper heritage or announce something new. That one sentence usually settles the temperature bias (see warm vs cool) and how much contrast the design can carry. Only then choose a wheel relationship: complementary for tension, analogous for calm, triadic for variety. Our guide to wheel relationships covers when each earns its keep, and color harmony schemes covers the underlying geometry. Naming the job first also keeps you honest later, because you can measure the finished palette against a goal instead of against a vague sense of taste.

Pick the starting geometry

Every palette begins as a shape on the color wheel, and that shape sets the emotional register before a single value is decided. A complementary pair sits across the wheel and reads as high energy; an analogous run of neighbors reads as quiet and unified; a triad spreads three points evenly for balanced variety. None of these is better than the others. They simply start you in a different place, and knowing the trade-offs saves a lot of blind trial and error. Josef Albers spent a whole teaching career on a related point: a color is never seen alone, so the relationship you set up matters more than any single swatch.

SchemeWheel relationshipFeelWorks well for
MonochromaticOne hue, many valuesCalm, cohesiveMinimal interfaces, quiet branding
AnalogousTwo to four neighboring huesHarmonious, low tensionLandscapes, relaxed layouts
ComplementaryTwo opposite huesHigh contrast, energeticCalls to action, focal accents
Split-complementaryOne hue plus two beside its oppositeContrast with less clashBeginner-safe vivid palettes
TriadicThree evenly spaced huesBalanced, playfulIllustration, children's brands
TetradicTwo complementary pairsRich but hard to balanceComplex work with one dominant hue

60-30-10: dominance and accent

Borrowed from interior design and just as useful on screens and canvases, the 60-30-10 rule distributes a palette by area. About 60 percent goes to a dominant color, usually the most muted, because it has to be lived with; about 30 percent goes to a secondary that supports and contrasts it; and about 10 percent goes to an accent, the most saturated voice, often drawn from the opposite side of the wheel. The percentages are scaffolding, not law, but the principle under them is firm: a palette without a dominant color is a tie, and ties feel indecisive. Assigning clear proportions early is what turns a set of pretty swatches into a design that knows where it wants your eye to land.

From scheme to working palette

Here is the step most tutorials skip: after choosing hues, vary them in value and saturation, not just hue. A usable palette of five or six swatches typically spans light to dark more than hue to hue. You want a pale tint for backgrounds, mid-tones for surfaces, a deep dark for text or shadow, and one saturated peak for the focal point. Add honest neutrals such as off-whites and near-greys; they belong to no scheme yet do most of the area's work, and they give the saturated colors room to sound loud. A common professional trick is to build the whole thing in greyscale first, prove that the values already read as a clear structure, and only then drop the hues back in.

Common mistakes

Four failure patterns account for most disappointing palettes. Everything saturated: with no muted majority there is no focal point, so the eye has nowhere to rest. Flat value range: all swatches sit at similar lightness, so the design turns to porridge in greyscale (the fix lives in value & saturation in composition). The everywhere-accent: an accent used on every button, badge and link stops being one, because scarcity is what made it read as special. Swatches judged in isolation: a palette approved as neat little squares can fall apart in layout, where area, adjacency and context change everything.

Screen vs paint, honestly

One honesty note. Your screen mixes light additively, so RGB values add toward white, while paint mixes subtractively and behaves differently: pigment mixtures drift darker and duller, and some vivid screen colors have no pigment equivalent at all. A palette built on screen will not mix identically in gouache. But the decisions this page is about, dominance, value structure, saturation hierarchy and accent discipline, transfer one to one, because they describe relationships between colors, and those relationships hold in both worlds.

Test the palette in place

A palette is only finished once it survives the layout it was made for. Audit it in context, not on a white artboard, because neighboring colors re-tint each other (that is simultaneous contrast), and a swatch that looked balanced beside grey can shift noticeably beside its neighbor. Check every text-bearing pair against the WCAG contrast thresholds so the design stays readable for everyone, and view the whole thing in greyscale one last time to confirm the value hierarchy still holds. When the structure reads with the color removed, the color is doing decoration rather than heavy lifting, which is exactly where you want it.

Sharpen the judgment behind it

Palette-building keeps asking one quiet question: what exactly lies between these two colors? That in-between judgment, for tints, shades and transitions, is precisely what Huetween trains: mix the color halfway between two given ones, three tries, every day.

Play Huetween →

Frequently asked questions

What is the 60-30-10 rule?

The 60-30-10 rule is a proportion guideline for distributing a palette by area: roughly 60 percent goes to a dominant, usually muted color, 30 percent to a secondary color, and 10 percent to a high-impact accent. It comes from interior design and works because it builds dominance and hierarchy into the palette from the start.

How many colors should a palette have?

Fewer hues than most beginners expect, often two or three plus neutrals, but several values of each. A working palette of five or six swatches usually spans light to dark more than hue to hue. Neutrals such as near-greys, off-whites and deep darks count as full members and cover most of the area.

Do I have to follow a harmony scheme exactly?

No. A harmony scheme is a starting geometry, not a rule. Practicing designers routinely nudge a hue a little around the wheel, mute one side of a pair, or add a neutral that belongs to no scheme. The scheme guarantees a sensible skeleton, and the adjustments give the palette its character.

Why does my palette look muddy or flat?

Usually one of three causes: every color sits at a similar value, so nothing separates even in greyscale; everything is equally saturated, so there is no focal point; or the accent is used so often it stops being an accent. The fix is hierarchy: widen the value range, mute the majority, and ration the accent.

Will a palette built on screen mix the same in paint?

Not identically. Screens mix light additively, so colors add toward white, while paint mixes subtractively and tends to drift darker and duller, and some vivid screen colors have no pigment match at all. The decisions that matter most, though, dominance, value structure and accent discipline, describe relationships between colors and transfer to both media.

Related reading

Sources: Josef Albers, Interaction of Color (Yale University Press) — overview; Johannes Itten, The Elements of Color; Interaction Design Foundation — Color Theory; Wikipedia — Color scheme.

Understand it, then train it. The daily games stay free forever. A Personal Pass adds progress tracking (trends plus export); Teacher and School tools let you assign it and follow a whole class. For teachers & self-learners →

Updated · By Lajos Toldi — educator and researcher in adaptive intelligent tutoring systems at AI24EduLabs (part of AI24Labs). Scientific claims are checked against authoritative sources; see our editorial policy.