Color shades and tints generator online
Generate the tints and shades of a color for your palette, in your browser.
Tints (lighter)
#57ff37#74ff5b#92ff7e#b0ffa1#ceffc4#ebffe8Base
#39ff14Shades (darker)
#061a02#0e4005#176608#1f8c0b#28b30e#30d911Tints = mixed toward white, shades = mixed toward black.
🔒 100% client-side — no data sent
Instantly generate a palette of lighter tints and darker shades from a single color. Perfect for building a consistent scale (50 to 900) for your design systems and interfaces. The tool runs 100% in your browser, so no color is ever sent online.
What is it for?
- ▸ Create a consistent color scale for a design system
- ▸ Get hover, active and disabled variants of a button
- ▸ Generate accessible light backgrounds and dark text from a brand color
- ▸ Expand a Tailwind color or CSS variable into ten steps
FAQ
What is the difference between a tint and a shade?
A tint is created by adding white to a color to lighten it, while a shade is produced by adding black to darken it.
How do I generate a palette from a single color?
Enter your color in hex, RGB or HSL, and the tool automatically computes a series of lighter and darker shades ready to copy.
Are these colors compatible with Tailwind CSS?
Yes, the generated scale follows the 50 to 900 logic used by Tailwind, so you can drop it straight into your theme configuration.