Tints, Shades and Tones: How to Build a Colour Scale

You have one blue you love. The interface needs nine of them — a pale one behind a card, a mid one for a button, a near-black one for text on a tinted panel. Same colour, different jobs. That row of related colours is a scale, and building a good one is less about taste than about doing the arithmetic right.

Designers reach for three old painting words to describe the moves. Tint, shade, tone. They're precise, they're useful, and they mean exactly one thing each. Let's pin them down before we build anything.

Three words, three moves

A tint adds white. Stir white into your blue and you get a lighter, softer version — think baby blue from navy. A shade adds black. Same blue, darker, heavier, closer to midnight. A tone adds grey, which knocks back the intensity and leaves the colour looking calmer, dustier, more grown-up.

That's the whole vocabulary. Tint up, shade down, tone sideways. Painters mix these with actual pigment on a palette, and the words come straight from that world.

On a screen you're not mixing pigment. You're setting numbers. And that changes the smart way to do it.

On screen, move lightness — don't mix paint

You can literally blend your blue with white in a tool and call the result a tint. It works. But mixing toward pure white or pure black drags the hue around and often muddies the colour on the way, especially through the middle of the range.

Cleaner approach: change the lightness channel directly. In HSL, that's the L value; a tint is just higher L, a shade is lower. So hsl(211 100% 50%) becomes a tint at hsl(211 100% 78%) and a shade at hsl(211 100% 28%) — hue locked, only brightness moving.

One catch. Very light and very dark colours look over-saturated if you leave S untouched, so ease the saturation down a little at the extremes. A pale tint wants less chroma than the mid tone. That single adjustment is the difference between a scale that feels designed and one that glows radioactive at the top.

Want to see two colours blend in even, perceptual steps without doing the math? The Mixer walks one colour into another and hands you every stop along the way. Good for sanity-checking what a real mix looks like versus a lightness move.

Building an even scale for a design system

Design systems don't ask for one tint. They ask for a ladder — 50, 100, 200 all the way to 900, the pattern Tailwind and Material made everyone fluent in. Fifty is nearly white. Nine hundred is nearly black. Your base colour usually sits around 500.

The naive way is to space those steps evenly in lightness. Ten equal jumps, done. Except it isn't done, because your eyes don't read lightness evenly.

Here's the trap. Equal numeric steps clump up in the middle, where your eye is most sensitive, and spread too thin at the ends. The result is a scale where 400, 500 and 600 all look like the same colour — the muddy middle — while 50 to 100 jumps too far. Three swatches doing one swatch's job. That's wasted rungs on your ladder.

Why perceptual steps beat linear ones

The fix is to space the steps by how different they look, not by raw numbers. This is where oklch() earns its keep. OKLCH was built so that equal changes in its lightness channel produce roughly equal changes in perceived brightness — which is exactly the promise HSL quietly breaks.

Build your ramp in OKLCH lightness and the steps land where your eye expects them. No muddy middle. Every stop reads as a distinct, usable colour, top to bottom. A row of status badges finally looks like a deliberate sequence instead of a gradient someone forgot to finish.

You don't have to hand-roll this. Open the Palette editor, drop your base colour in, and pull tints and shades from it while watching real swatches react. When the ladder looks right, name each rung by its role in the Design Tokens tool and export the set — so 500 is your brand action and 100 is your subtle background, not just numbers floating in a stylesheet.

Common questions

How many steps should a colour scale have?

Nine or ten covers almost everything — the 50–900 range is popular because it does. If you're small, five is plenty: one light, one dark, your base, and a step either side. Add rungs when a real screen demands one, not before.

Should I build tints and shades in HEX, HSL or OKLCH?

Author in OKLCH or HSL, where lightness is a single knob you can turn. Keep a HEX version for anything that needs it. Flip between all of them in the Converter so you're never locked into one format.

Is a tone the same as a muted colour?

Basically, yes. Adding grey — or on screen, lowering saturation — is what makes a colour read as muted, dusty, or sophisticated. Tone is just the formal word for it.

A scale is only arithmetic wearing a nice outfit: pick one colour you mean, move its lightness in even perceptual steps, ease the chroma at the edges. Do that and nine blues start behaving like a family. Open the Mixer, feed it your base, and watch the middle stop turning to mud.