Color Shades Generator
← All toolsTen tints, ten shades and ten tones from a single base color, plus the 50-950 scale people actually paste into a config. Tints mix toward white, shades toward black, and tones toward grey at the same lightness — three different operations that get used as though they were one.
Tints mixed toward white
Shades mixed toward black
Tones mixed toward grey, same lightness
50-950 scale even steps in perceptual lightness
HEX list
CSS custom properties
50-950 scale
How to use the Shades Generator
- Set a base color with the color well or by typing a hex value.
- Read off the three strips: tints above the base, shades below it, tones beside it. Clicking any swatch copies its hex.
- Take the 50-950 scale if you need a full ramp — the numbers are the ones a design system expects, and the steps are spaced by perceived lightness rather than by raw HSL.
- Copy the whole thing as a hex list, as CSS custom properties, or as step-and-hex pairs, and send the link if someone else needs the same palette.
FAQ
- What is the difference between a tint, a shade and a tone?
- A tint is the color mixed toward white, a shade is the same color mixed toward black, and a tone is mixed toward grey — the lightness stays where it is and the saturation comes down. The third one is the one people skip, which is why muted palettes so often come out merely dark.
- Why is the 50-950 scale not evenly spaced in lightness?
- Because HSL lightness is not perceptual. Splitting it evenly puts almost all the visible difference in the dark half and leaves 50, 100 and 200 looking like the same color. Each step here targets a CIE L* value instead, solved for by search, so the steps look evenly spaced rather than merely measuring evenly.
- Can I paste this straight into Tailwind or a CSS file?
- Yes. The CSS box gives you custom properties named --color-50 through --color-950, and the scale box gives the same values as plain step-and-hex pairs for a config file. Both are the same numbers as the swatches above them.
- Does the base color have to be a hex?
- The hex field takes three or six digits with or without the hash, and the color well beside it opens your system picker. Whatever you set is reflected in the link at the bottom, so a palette you like is a URL you can send.
