Monochromatic color scheme: one hue, a whole identity

A monochromatic color scheme uses one hue and nothing else, varied in lightness and saturation. Think of navy, cobalt, sky and ice: all blue, all clearly related, and enough contrast between them to handle backgrounds, text and highlights. Because every colour shares the same hue, a monochromatic palette always looks unified. The work is in building enough range inside that one hue.

This guide covers the three ways to vary a hue, how to build a ramp you can actually design with, and how monochrome works in gradients. For the wider context, see colour theory basics.

Tints, shades and tones

Every colour in a monochromatic palette comes from one of three moves. A tint adds white, making the colour lighter and softer. A shade adds black, making it deeper. A tone adds grey, making it quieter without changing its lightness much.

How to build a monochromatic palette

A handful of random tints is not a palette. What you want is a ramp: a sequence of steps from near-white to near-black, evenly spaced so that each step looks as different from its neighbour as the last. Nine to eleven steps is a common size, and it is what most design systems use.

1. 1

   Choose the core hue

   Pick the version of the colour you like most at full strength. It becomes the middle of the ramp.

2. 2

   Set the ends

   Choose a near-white with a hint of the hue and a near-black with a hint of the hue. Avoid pure white and pure black; they look disconnected.

3. 3

   Fill the steps by lightness

   Space the steps by how light they look, not by equal hex or HSL values. Perceptual spaces like OKLCH make this easy; see OKLCH gradients.

4. 4

   Lower saturation at the ends

   Very light and very dark steps look better slightly muted. Full saturation at the extremes looks garish or muddy.

5. 5

   Nudge the hue

   Let the light end drift slightly warmer or cooler and the dark end the other way. It adds life without breaking the scheme.

Why a slight hue shift helps

Real objects rarely darken by simply adding black: shadows pick up cooler or warmer light from their surroundings. A ramp that only mixes black and white looks flat by comparison. Shifting the hue a few degrees across the ramp is standard practice in illustration and design systems.

Running a whole identity on one hue

A monochromatic brand can be surprisingly distinctive, because it is disciplined in a way most brands are not. The trick is to give each step of the ramp a job and stick to it.

Always pair text and background from opposite ends of the ramp. Two middle steps look lovely as swatches and fail as text; check with the guidelines in colour contrast. Record the ramp, with each step's role, in your brand kit so everyone uses the same values.

The one thing a monochromatic identity lacks is an obvious accent. If your designs need a button or a price to jump out, allow one colour from outside the hue and use it rarely. That moves you towards an analogous palette or an accented monochrome, both perfectly good.

Monochromatic gradients

Single-hue gradients are among the most elegant you can make: they suggest light falling across one material. They never turn muddy, because there is no second hue to fight with.