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.
| Scheme | Wheel relationship | Feel | Works well for |
|---|---|---|---|
| Monochromatic | One hue, many values | Calm, cohesive | Minimal interfaces, quiet branding |
| Analogous | Two to four neighboring hues | Harmonious, low tension | Landscapes, relaxed layouts |
| Complementary | Two opposite hues | High contrast, energetic | Calls to action, focal accents |
| Split-complementary | One hue plus two beside its opposite | Contrast with less clash | Beginner-safe vivid palettes |
| Triadic | Three evenly spaced hues | Balanced, playful | Illustration, children's brands |
| Tetradic | Two complementary pairs | Rich but hard to balance | Complex 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.
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
- Color wheel relationships: choosing the geometry your palette starts from.
- Value & saturation in composition: the structure that makes a palette read.
- Color contrast explained: making sure the palette stays readable for everyone.
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 →