Tints, shades and tones: building a usable 9-step scale

The definitions, and why they're useful

A tint is a color mixed with white, a shade is a color mixed with black, and a tone is a color mixed with gray. The terms are old painting vocabulary, and they map cleanly onto a modern scale: tints live at the light end of your scale and carry surfaces, shades live at the dark end and carry emphasis, and tones are the workhorse mid-range where most UI colors land.

The useful mental model is less 'three kinds of color' and more 'one hue explored along two axes': toward light, toward dark, and toward neutrality. That is precisely what a 50–950 scale is.

Why mixing with white and black fails

The naive recipe — blend your brand color toward #ffffff for a tint and toward #000000 for a shade — produces a broken scale. Mixing toward white lifts brightness but also erodes chroma fast: the 100 and 200 steps end up near-identical pastel grays. Mixing toward black drags everything toward a muddy brown-ish darkness for warm hues, because 'black' from a hex triplet is not neutral in hue terms.

The giveaway is uneven spacing: a few steps look like duplicates, and one step jumps. In a perceptually uniform space like OKLCH, the fix is to walk lightness between fixed anchors while preserving the hue, and to modulate chroma with its own anchor curve — bright steps less saturated, the middle most vivid, dark steps more neutral again.

The layout of a usable scale

The full 50–950 scale (eleven steps) is the raw material; most real design systems ship a usable subset of about nine. The light steps 50–300 read as tints: fills, hover surfaces, selected tags, input backgrounds. The middle 400–600 are your primary color and its neighbours. The dark steps 700–950 are shades: text-on-light is usually a 900 or 950, and 700–800 works for pressed states and strong borders.

The most common usable pattern is 50, 100, 200, 300, 500, 600, 700, 800, 900 — dropping 400 and 950 — because a UI rarely needs a 950 text step (the 900 is dark enough) or a 400 between the surface tints and the primary. You keep the full scale in tokens; you just don't wire every step into components.

• 50–300: surface tints — fills, tags, highlight backgrounds
• 500–600: the primary color itself and its closest working neighbours
• 700–800: pressed states, strong borders, emphasis on light
• 900–950: text and contrast-critical foregrounds
• Keep the full scale in tokens; wire only the subset into components

Names should describe the job, not the recipe

70 is a step number, not a role. The same scale serves three different names in code: the primitive brand-brand-70, the semantic surface/foreground/primary tokens that components actually reference, and the Tailwind utilities --color-brand-*. Keeping the three layers separate is what lets you retheme a product without touching components.

That separation is the difference between a scale that decorates a stylesheet and a scale that scaffolds a design system.