Shades, Tints & Tones Generator
Generate a palette of shades (mixed with black), tints (mixed with white) and tones (mixed with gray) from a single base color.
Your file is processed locally in your browser and is not uploaded to our server.
#3fa9f5
Palette
Shades (+ black)
Tints (+ white)
Tones (+ gray)
How to use Shades, Tints & Tones Generator
- 1Pick a base color.
- 2See its shades (mixed with black), tints (mixed with white), and tones (mixed with gray).
- 3Hover any swatch to copy its HEX code.
Frequently asked questions
A shade adds black (darker), a tint adds white (lighter), and a tone adds gray (more muted) — all while keeping the same base hue.
Related tools
Developer
Color Harmony Generator
Generate complementary, analogous or triadic color schemes.
Developer
Color Blindness Simulator
Preview an image under simulated color blindness.
Developer
CSS Gradient Generator
Build a linear or radial CSS gradient visually.
Developer
Color Contrast Checker
Check WCAG AA/AAA contrast between two colors.
Developer
CSS Shadow Generator
Build a CSS box-shadow or text-shadow visually.