About the Color Shades Generator
A single brand color is rarely enough to build an interface. You need lighter versions for backgrounds and hover states and darker versions for text, borders and pressed buttons. The Color Shades Generator creates them all from one base color.
It produces tints (the color mixed with white), shades (mixed with black) and a balanced 50–950 scale in the same style as popular design systems like Tailwind CSS, where 500 is your base color. Export the scale as ready-to-use CSS custom properties with your own palette name, or click any swatch to copy its HEX code.
How to use the Color Shades Generator
- Pick a base color or type its HEX code.
- Optionally set a palette name such as "primary" or "brand".
- Click swatches to copy individual colors.
- Copy the CSS variables for the full 50–950 scale.
Frequently asked questions
What is the difference between a tint and a shade?
A tint is a color mixed with white, making it lighter. A shade is mixed with black, making it darker. A tone is mixed with gray.
Can I use this palette with Tailwind CSS?
Yes. Copy the generated values into the colors section of your Tailwind configuration, using the same 50–950 keys.
Which shade should I use for text?
Use darker values (700–900) on light backgrounds and lighter values (100–300) on dark backgrounds, and check readability with our Contrast Checker.