Tint & Shade Generator
Generate tints (lighter) and shades (darker) of any color.
Click any swatch to copy its HEX code.
About Tint & Shade Generator
Enter any base color and generate a full scale of 10 tints (mixed with white) and 10 shades (mixed with black). Similar to Tailwind CSS color scales (50–900). Each swatch shows the HEX code, click to copy.
Use Cases
Building a Tailwind-style color palette, creating light/dark variants of brand colors, designing hover/active states, generating accessible color scales for UI systems.
How It Works
Tints: linearly interpolate each RGB channel toward 255 (white). Shades: interpolate toward 0 (black). 10 steps each at 10% increments.
Frequently Asked Questions
What is the difference between tint and shade?
A tint is a color mixed with white (lighter). A shade is a color mixed with black (darker). A tone is mixed with grey.
Can I use these in Tailwind CSS?
Yes. The 10-step scale mirrors Tailwind's color system. You can map them to 50, 100, 200 … 900 values in your Tailwind config.