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 #f3ecfd at the light end to #0c031c at the dark end, at a fixed saturation.
Tints
9 tints of The color, #894eef to #f2ebfd — mixed toward white for backgrounds and fills.
Shades
9 shades of The color, #7034d5 to #0c0618 — mixed toward black for text, borders and emphasis.
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.
Good to know
- Tints are lighter, softer versions of a color — great for large background areas.
- Shades are darker versions — the reliable choice for text and borders.
Tools that pair with Shades Generator
Shades Generator is one of 33 single-page tools in this workspace. These are the ones that carry the job on — the color value moves between them, so nothing gets retyped or re-uploaded.
Guides for Shades Generator
Longer reads for the questions that come up around shades generator.
