Build tints and shades from one color
The Tints & Shades generator progressively mixes a selected HEX color with white and black. It displays both families together so you can compare lighter tints, the original color and darker shades.
What are tints and shades?
A tint is made by mixing a color with white. A shade is made by mixing a color with black. Both retain a connection to the starting color while moving toward a light or dark endpoint.
How the generator works
Choose a color or enter its HEX value, then use the variations control to set the interval between results. A smaller interval produces more samples along each progression; a larger interval produces fewer.
The tool uses digital color mixing to produce one row blended toward white and another blended toward black. Each result includes a HEX value that can be copied or exported.
When to use tints and shades
A tint-and-shade scale can help you compare variations that share a common origin. Its suitability still depends on the surrounding colors and the role it needs to serve.
- Explore light backgrounds, subtle borders and darker surfaces.
- Compare options for emphasis and visual hierarchy.
- Create candidate steps for a monochromatic palette or interface states.
- Develop highlights and shadows for illustration, then refine them in context.
Tints, shades and tones
Tints move a color toward white and shades move it toward black. Tones instead mix the color with gray, which creates a muted progression rather than separate white and black endpoints.