Color Shades & Tints Generator
Pick any color and instantly get its full scale — tints toward white, shades toward black and tones toward gray — every value copy-ready.
Lightness scale
The color stepped from near-white to near-black at a fixed saturation.
Tints
Tints mix the color with white — lighter, softer versions for backgrounds and fills.
Shades
Shades mix the color with black — deeper versions for text, borders and emphasis.
Tones
Tones mix the color with gray — muted versions that are easier on the eye in large areas.
A shade scale is one of the most reusable design assets you can make: the base color for your accents, tints for backgrounds, shades for text and tones for muted fills. This generator produces all four scales from a single hex value.
Frequently asked questions
A tint mixes the color with white to make it lighter; a shade mixes it with black to make it darker. A tone mixes it with gray to reduce saturation.
Must-know facts
- Tints are lighter, softer versions of a color — great for large background areas.
- Shades are darker versions — the reliable choice for text and borders.
Related tools
These color tools pair naturally with the one you just used — keep exploring.