Tint, Tone & Shade Generator

Tints, tones and shades — what's the difference?

All three are derivations of a base hue, but they pull it in different directions. A tint is the base color mixed with white, producing a lighter, softer version — think pastel. A shade is the base mixed with black, producing a darker, more dramatic version. A tone is the base mixed with gray, lowering both saturation and intensity without committing to lighter or darker — useful for muted, sophisticated palettes. Together they form a complete vocabulary for building monochromatic scales.

How to use this generator

Pick a base color or paste a hex code. The page generates ten evenly-spaced tints (rows getting lighter), ten tones (rows getting more muted), and ten shades (rows getting darker). The percentage on each swatch is the mix amount with the target color (white, gray or black). Click a swatch to copy its hex — handy for filling out a design-token table or a Tailwind config.

Building scales that work in production

Don't ship all 30 swatches — designers rarely need that granularity. Pick 5-7 well-spaced steps and label them like a typographic scale (50, 100, 200... 900) so engineers can predict where any new color slot will land. Pair tints and shades for backgrounds and emphasis; reach for tones when you need muted UI accents that won't fight the brand color. Always check contrast against the surface you'll use them on — lighter tints often fail WCAG against white surfaces, and darker shades fail against black ones.

How each variant is computed

Each output is a linear interpolation in sRGB space: tint(c, t) = mix(c, white, t), shade(c, t) = mix(c, black, t), tone(c, t) = mix(c, gray, t), where mix(a, b, t) = a·(1−t) + b·t applied per channel. We pick eleven evenly-spaced t values from 1/11 to 10/11, leaving the base color itself out of the strip — its position is implicit between the strongest tint and the strongest shade.

When to reach for which

Tints are the right call for hover backgrounds, soft callouts, and pastel illustrations — they warm a layout and signal calm. Shades belong in active states, deep headers, and emphasis areas — they project gravity and weight. Tones are the secret weapon for editorial design, museum sites, and any palette that should feel measured rather than vivid; they bridge brand and neutral without flattening either.

Frequently asked questions

Why do my tints look chalky?

Mixing in sRGB space (which is what most tools do, including this one) is computationally simple but optically imperfect — straight-line averaging in non-linear space tends to dull saturated hues. For art-directed palettes where chalkiness is unacceptable, mix in a perceptually uniform space like OKLCH; expect a small saturation boost on the mid-tints.

Should I use HSL lightness instead of mixing with white/black?

HSL lightness is a one-line shortcut but it's perceptually uneven — bumping L from 50 to 60 changes a yellow far more than a blue. Mixing with white/black gives more predictable visual steps for monochromatic scales, which is why we default to it. If you need uniform perceived lightness steps across the spectrum, switch to OKLCH.

Do the percentages match Material/Tailwind tokens like 50, 100, 900?

Not exactly. Most production design systems hand-tune their step values for perceptual consistency, so a 50→900 ramp is not a pure mathematical scale. Use this generator as a starting point: pick the steps that match your brand, then adjust visually before committing to tokens.

Can I copy all 30 hex codes at once?

Currently each swatch is copyable individually. For bulk export, take a screenshot of the strip — the hex codes are baked into the visible labels — or open DevTools → copy the rendered HTML, which preserves all swatch metadata.

Does the tool understand named colors like "royalblue"?

The picker and hex input only accept hex codes. To start from a named color, look up its hex in our Named Colors tool, then paste it here.

Are the colors generated in my browser or on a server?

Entirely in your browser. Open DevTools → Network and drag the picker — you'll see no requests fire. Brand audits and unreleased palettes are safe to test here.

Tint, Tone & Shade Generator