Generador de tonos de color
Pick a color and generate a full range of lighter tints and darker shades. Click any swatch to copy its value.
Ad Space
10
Tints (lighter)
Base Color
Shades (darker)
Ad Space
Tints vs. Shades
Tints are created by mixing a color with white, making it progressively lighter. Shades are created by mixing with black, making it darker. Together they form a complete tonal scale useful for UI design, gradients, hover states, and accessible color systems.
Frequently Asked Questions
How do I use these shades?
Use lighter tints for backgrounds, hover states, and borders. Use darker shades for text, active states, and emphasis. Click "Copy All as CSS Variables" to get a ready-to-use CSS snippet.
Can I copy individual colors?
Yes! Click any swatch to copy its HEX value to your clipboard.