Color Shade & Tint Generator | Build a 21-Step Light-to-Dark Color Scale

Feed in one base HEX color and see 10 darker shades and 10 lighter tints laid out as a single scale. Every swatch shows both its HEX and RGB values, so you can lift the exact stops you need for hover states, borders, dark-mode surfaces, and design tokens.

💡 About This Tool

You picked a brand color, then hit the wall every front-end dev knows: what do you use for the button's :hover, the disabled state, the subtle border, the muted background? Nudging the lightness by hand usually produces a scale that drifts off-tone and looks inconsistent across components.

This generator interpolates your base RGB toward pure black and pure white in even steps. Shades multiply each channel by a shrinking factor; tints fill the gap toward 255 by a growing factor. The result is a 21-stop scale — 10 shades, your base, 10 tints — with a predictable, linear progression you can map straight to token names like shade-1 through tint-10.

Each swatch overlays its HEX and RGB readout in an automatically contrasting text color, so light and dark stops stay legible. You can copy a single swatch or export the whole scale as a commented list of CSS-variable lines, which makes the jump from a Figma mockup to a stylesheet a copy-and-tweak away.

🧐 Frequently Asked Questions

What's the difference between a shade and a tint? A shade is your color mixed toward black (darker); a tint is mixed toward white (lighter). Mixing toward gray gives a tone — this tool deliberately sticks to the two most useful axes, shade and tint.

How are the 10 steps calculated? Shades multiply each RGB channel by i/11 for i from 10 down to 1. Tints use channel + (255 − channel) × i/11 for i from 1 to 10. The denominator of 11 keeps pure black and pure white out of the set, so every stop stays a usable, on-brand step.

Why not just change HSL lightness? Moving only HSL's L value can shift perceived brightness unevenly across hues. Linear RGB interpolation is simpler and more predictable. If you need perceptual uniformity, pair this with a Lab/OKLCH tool.

Does it accept 3-digit shorthand HEX? Yes. Shorthand like #f0c is expanded to six digits (#ff00cc) before processing.

Can I export the whole scale at once? Copy All outputs every shade and tint as a labeled, commented list ready to drop into a stylesheet as the start of your variable definitions.

📚 Fun Facts

Ever wonder why Tailwind and Material Design ship colors numbered 50 through 900? It's so a single brand hue can be expanded into a reusable, tokenized scale. Derive your steps mechanically up front and adding a dark theme later becomes a question of which number to flip rather than re-picking colors by eye. The shade-and-tint split also mirrors halftone printing, where varying the ink dot size — not the ink itself — is what creates lighter and darker passages on the page.