Addaly is in open beta. Things will change, and AI answers can be wrong — check anything that matters.

Design, Before Any Software

Hierarchy, type, colour and spacing — the part of design you can do with a pencil, before any software.

Lesson 45 of 748 min

How many colours a design needs

The complete palette for most products

Here is a palette sufficient for the great majority of interfaces and printed material:

  • One neutral ramp, nine or ten steps, slightly tinted.
  • One brand hue ramp, five or six steps.
  • Three or four semantic colours — danger, warning, success, and perhaps info — each with a light background variant and a dark text variant.

That is it. Two hues plus the semantic set. Almost every design that feels chaotic has more than this, and almost every design that feels coherent has this or less.

The reason is the emphasis budget from the first block. A second brand colour does not add a second accent; it halves the strength of the first. With five brand colours, nothing is an accent and the palette has become decoration.

The whole palette, for most productsOne neutral rampNine or ten steps, tinted very slightly towards onehueOne brand rampFive or six steps, covering the interactive statesThree or four semantic coloursDanger, warning, success, and perhaps infoTwo hues plus the semantic set. A second brand colour does not add a second accent; it halves thestrength of the first.
The whole palette, for most productsOne neutral rampNine or ten steps, tinted very slightly towardsone hueOne brand rampFive or six steps, covering the interactivestatesThree or four semantic coloursDanger, warning, success, and perhaps infoTwo hues plus the semantic set. A second brandcolour does not add a second accent; it halves thestrength of the first.

The 60/30/10 heuristic

A widely repeated split: 60% of the surface in a dominant neutral, 30% in a secondary, 10% in an accent.

It comes from interior design and it has no research behind it. What it is useful for is as a corrective, because the instinct of a beginner is roughly 40/40/20 and the result is a page where the accent has no force. If you are unsure, aim at 60/30/10 and you will overshoot in the right direction.

Do not treat it as a specification. Plenty of excellent work is 90/8/2, and a great deal of interface design is closer to 95/4/1 once you count the actual pixels.

Where more colours are genuinely required

Data visualisation. Categorical series need distinguishable colours, and there the constraints are different and well studied:

  • Roughly six to eight categories is the practical maximum before colours stop being reliably distinguishable, whatever palette you use. Beyond that, group the tail into Other, or use a different encoding.
  • The palette must survive colour vision deficiency, which means a tested set rather than one you assembled. Okabe-Ito's eight-colour palette and ColorBrewer's qualitative schemes are both free and both designed for this.
  • Sequential data — a quantity increasing — wants a single hue varying in lightness, not a rainbow. The rainbow scale is actively misleading because its perceived lightness is not monotonic, which creates false boundaries in the data where the hue changes fast.
  • Diverging data — deviation either side of a midpoint — wants two hues meeting at a light neutral. Blue to orange is the standard colour-blind-safe pair.

Category systems that users genuinely navigate by colour: a calendar with six colleagues' schedules, a transit map, a file-type system. These earn their colours because the colour is the primary index and the set is learned over time.

Illustration and photography, which are not palettes and should not be constrained by one.

Building the brand ramp

From a single brand hue, the ramp serves every state you need:

50   pale background for a selected row or a tinted banner
100  hover background on a light surface
300  borders and dividers in brand colour
500  the primary action, the main brand appearance
700  hover and pressed states on the primary action
900  brand-coloured text on a pale brand background

Six values, one hue. Notice that the interactive states come out of the ramp rather than being invented separately, which is what keeps a hover state looking related to the thing it is a state of.

The audit

Same as for spacing and type. Export every distinct colour value in the design as a row of swatches and look at them together.

What this reveals, reliably:

  • Two greys that were meant to be the same.
  • Three blues that are nearly identical because they came from three sources.
  • A semantic red and a brand red that clash.
  • A palette with fourteen values where six were intended.

The repair is mechanical: map each stray onto the nearest intended value and delete it.

The restraint argument, stated properly

Using fewer colours is not minimalism or taste. It is that a colour only carries information if it is rare enough to mean something. Every additional colour in a system reduces the information carried by all the others, in exactly the way every additional emphasis reduces the emphasis of the rest.

So the question to ask of any proposed new colour is not whether it looks good with the others. It is: what will this colour mean, and what is currently meaning that?

The one thing to keep

One neutral ramp, one brand ramp and three or four semantic colours covers most design work, because each additional colour reduces the information carried by every existing one — data visualisation is the genuine exception, and there the palette should be a tested colour-blind-safe set.

Before you move on

A dashboard uses a rainbow colour scale to show a single continuous quantity from low to high. A reviewer objects. What is the strongest technical reason?

Pick the one you would defend. Nobody sees your answer.

No ads. No data sale. No public scores on people. Ever.

© 2026 Addaly