Tonal Gradient Generator

Tints, shades, and why a scale is not just both

A tint is your color mixed toward white, a shade is the same color mixed toward black. Generating a scale by stepping evenly between the two is the obvious approach, and it produces a scale that looks wrong: the light end goes chalky and washed out, the dark end turns muddy and loses the hue entirely.

The reason is that mixing toward pure white and pure black drains saturation at both ends. A scale that holds up keeps some chroma in the extremes and lets the hue drift very slightly — warmer as it darkens, cooler as it lightens — which is what makes a hand-built palette feel considered rather than computed.

Even numbers, uneven perception

Ten equal steps of HSL lightness do not look like ten equal steps. Human vision is far more sensitive to change in the light half of the range, so the top of the scale appears to jump while the bottom bunches together — and it gets worse for yellows and greens, which read as much lighter than their lightness value suggests.

This is the problem oklch() exists to solve: it is built so that a fixed change in lightness looks like a fixed change to the eye, across every hue. If you are defining a palette today and your browser support allows it, an OKLCH scale will need far less hand-correction than an HSL one.

Using a scale as tokens

The 50–900 convention exists because it survives change. Naming a step blue-500 rather than blue-mid leaves room to insert blue-450 later without renaming anything downstream, and it maps cleanly onto Tailwind, Material and most component libraries.

One rule saves most of the accessibility work later: steps roughly five apart in a ten-step scale — 100 against 600, 200 against 700 — will usually clear 4.5:1. Fix those pairings once, write them into the tokens as foreground and background pairs, and nobody has to check contrast per component afterwards.

Frequently asked questions

How many steps should a scale have?

Nine or ten for a primary color that carries an interface. Five is plenty for a secondary or an accent that only appears in a few places — every step you define is one somebody has to choose between.

Should my brand color be the middle of the scale?

Usually, but not always. If your brand color is naturally dark, forcing it to the middle pushes the dark end to near-black and wastes three steps. Put it where it actually sits and let the scale run unevenly around it.

Can I use a tonal scale as a gradient?

Yes, and monochromatic gradients are among the safest you can use — there is no third color to pass through, so no muddy midpoint. A two-stop gradient from step 300 to step 700 is a reliable card or button background.

Does this work for greys?

It works better than a true neutral would. A grey scale carrying a few points of your brand hue reads as part of the palette rather than as default UI chrome, and the tint is not consciously noticeable at small sizes.

Other gradient tools

• Gradient Generator — multi-color gradients with full control
• Gradient Text Generator — apply a scale to type
• Curated collection — built palettes if you would rather start from one