Tint and Shade Generator
Color Scale
In color theory, tints are created by mixing a color with white and shades by mixing with black. This is distinct from adjusting opacity or HSL lightness - tint and shade mixing produces more natural-looking color scales commonly used in design systems and UI theming.
1.
Enter a base color or use the color picker
2.
Browse the tints (mixed with white) and shades (mixed with black)
3.
Click any swatch to copy its hex value
▸
Building a complete color scale for a design system or component library
▸
Finding a hover, active, or disabled state color for a UI element
▸
Exploring lighter and darker variants of a brand color
What is the difference between a tint and a shade?
A tint is a color mixed with white, making it lighter. A shade is a color mixed with black, making it darker. Together they form a tonal scale from near-white to near-black.
How many steps are generated?
The tool generates 19 swatches - 9 tints progressively lighter than the base color, the base color itself, and 9 shades progressively darker.
Is this the same as opacity?
Tints and shades mix actual color with white or black. Reducing opacity makes a color transparent over whatever is behind it, which looks different on colored backgrounds.
Is my data sent to a server?
All generation runs locally in your browser. No color data is transmitted anywhere.
Can I copy individual color values?
Click any swatch to copy its HEX value to the clipboard.