Color Shades
Generate a complete palette with lighter and darker shades of your color. Perfect for UI design where you need various shades of a primary color.
Base Color
Select Base Color
Color Palette
Click any color to copy
50
#758bec
100
#8598ee
150
#94a5f0
200
#a3b2f2
500
#667eea
600
#5c71d3
700
#5265bb
800
#4758a4
900
#3d4c8c
How to use
- 1Choose a base color
- 2Select number of shades
- 3Copy the color shades
Features
- Color Shades
Generates lighter and darker variants of a color.
- Tailwind-compatible
Perfect for Tailwind CSS color scales (50-900).
- CSS Variables
Exports as CSS Custom Properties.
- Preview
Shows all shades visually side by side.
FAQ
How many shades should I create?
For Tailwind: 10 shades (50, 100, 200...900). For own projects: 5-7 usually sufficient.
What's the difference to palette?
Palette creates harmonic color combinations. Shades creates brightness variants of one color.
Can I customize the shades?
Yes, you can choose the number and brightness range yourself.
Related Tools
Note: All processing happens in your browser. Your files are not uploaded to any server.