Shades and Tints Generator
Color Shades, Tints and Tones Tool
Pick a base color and generate matching tints, shades, and tones. Click any swatch to copy its hex code.
Tints (mixed toward white)
Shades (mixed toward black)
Tones (mixed toward gray)
About Shades, Tints and Tones
A tint is created by mixing a base color with white, producing a lighter, softer version. A shade is the opposite: the color is mixed with black to make it darker and deeper. A tone is made by mixing the color with gray, which reduces its saturation and gives it a more muted, sophisticated feel.
Designers use tints, shades, and tones to build harmonious color palettes from a single base color. They are perfect for creating hover states, backgrounds, borders, and subtle UI variations that all feel related to one another.
