🎚️
Tints & Shades Generator
Generate light and dark variations of any color
Click any color to copy its HEX value.
🔒 Runs 100% in your browser — nothing is uploaded.
Advertisement
Support free tools — this space is reserved for Google AdSense. Add your publisher ID in
assets/js/site-config.js to start earning.
Tints & Shades Generator — frequently asked questions
What is the difference between a tint, tone and shade?
A tint mixes the color with white, a tone mixes it with gray, and a shade mixes it with black. This tool generates all three scales from your base color.
How do I use a tint scale in my design?
Scales are ideal for hover states, backgrounds, borders and data visualization. Many design systems export 50–900 swatches like this.
Can I copy all the colors at once?
Yes — the Copy CSS block exports the whole scale as CSS custom properties you can paste straight into your stylesheet.