Color Shades Generator
Generate a complete scale of tints (lighter) and shades (darker) from any base color. Perfect for building consistent color systems and design tokens for your projects.
Shades
Darker variations created by mixing with black
Tints
Lighter variations created by mixing with white
Tones
Muted variations created by reducing saturation
About Shades, Tints, and Tones
Shades are created by adding black to a color, making it darker while maintaining the hue.
Tints are created by adding white to a color, making it lighter and often appearing more pastel.
Tones are created by adding gray (reducing saturation), making the color more muted and subtle.
Click on any color swatch to copy its hex value to your clipboard.
FAQ
What is the difference between tints and shades?
Tints are created by adding white to a color, making it lighter. Shades are created by adding black, making the color darker. Both maintain the original hue while changing the lightness.
How many shades are generated?
By default, the tool generates a 10-step scale (50-900) similar to Tailwind CSS. You can customize the number of steps and the intensity of each variation.
Can I export the color scale?
Yes, you can export your generated shades as CSS variables, Tailwind config, SCSS variables, or copy individual color codes. This makes it easy to use in your projects.