Color Shade Generator
Generate Tailwind-style color shades from any hex color. Perfect for building consistent design systems and color scales.
50
#FEF4F9
100
#FDE3F0
200
#FBC7E2
300
#F8AAD3
400
#F68EC5
500
#F472B6
600
#C35B92
700
#92446D
800
#622E49
900
#311724
950
#14090F
CSS Variables
:root {
--color-50: #FEF4F9;
--color-100: #FDE3F0;
--color-200: #FBC7E2;
--color-300: #F8AAD3;
--color-400: #F68EC5;
--color-500: #F472B6;
--color-600: #C35B92;
--color-700: #92446D;
--color-800: #622E49;
--color-900: #311724;
--color-950: #14090F;
}design system building blocks
About Color Shades
What Are Shades, Tints and Tones?
A shade is created by mixing a color with black, a tint by mixing it with white, and a tone by mixing it with gray. This tool generates the full range for any hex color: lighter tints (50–400), the base color (500), and darker shades (600–950) — the same scale structure used by popular design systems like Tailwind.
Having a complete scale matters because interfaces need variety: dark text on light backgrounds, borders that sit between, hover states, and accents. A well-built scale gives you consistent contrast and harmony across the whole UI without guessing.
How to Build a Color Scale
- Start with your brand color as the 500 step — the value you'll use most.
- Use the lighter steps for backgrounds, hover fills and borders; keep 700–950 for text and contrast elements.
- Copy the generated CSS variables to drop the whole scale into your project instantly.
- Check contrast with our Contrast Checker before committing text colors to production.
Shade Generator FAQ
What's the difference between a shade and a tint?
A tint is made by adding white to a color (lighter), while a shade is made by adding black (darker). This tool produces both in one scale.
How do I use the generated shades in CSS?
Click Copy CSS to grab a ready-made set of variables like --color-500: #F472B6, then paste them into your stylesheet and reference them anywhere.
How many shades does a design system need?
Eleven steps (50 to 950) is the common standard — enough for every UI role from the lightest background tint to the darkest text.