Color Shades Generator
Generate 10-shade color palettes (Tailwind 50 to 900) from any target HEX.
Color Shades & Tints Generator
About Color Shades Generator
The Comprehensive Color Shades Generator creates monochromatic dark shades by progressively adding pure black ($0$ to $100\%$) in CIE Lab, HSL, and RGB color spaces, generating complete 50–900 design system shade scales.
How to Use Color Shades Generator
Step 1
Enter any Hex, RGB, or HSL base color.
Step 2
Select number of shades to generate (e.g. 10 shades).
Step 3
Inspect WCAG accessibility contrast badges on each swatch.
Step 4
Click "Copy Tailwind Palette" or click an individual shade to copy its Hex.
Practical Use Cases for Color Shades Generator
Building Tailwind & Material Design Dark Scales
Generate 100, 200, 300, 400, 500, 600, 700, 800, 900 shade scales from a single primary brand color for UI themes.
Hover & Active State Button Theming
Find the mathematically perfect 10% and 20% darker shades for button hover and pressed states.
Input & Output Examples
Generating Shades for Indigo (#4F46E5)
Base Color: #4F46E5 (Indigo 600), Steps: 10
Shades Scale: #473FCF (10%), #3F38B9 (20%), #3731A2 (30%), #2F2A8C (40%), #272376 (50%), ... #080717 (90%)
Key Features & Performance
- ✓Generates 5 to 20 progressive dark shade swatches from any base color.
- ✓Shading algorithms: CIE Lab Lightness reduction, HSL Lightness scaling, and RGB multiplication.
- ✓Calculates WCAG 2.1 contrast ratios against white text for every generated shade.
- ✓Exports in Tailwind CSS `theme.colors` format, CSS Custom Properties, and Figma tokens.
- ✓100% Client-Side generation.
- ✓1-Click Copy all shades.
Key Terminology & Definitions
Shade (Color Theory)
A color variation created by adding black to a base hue, decreasing lightness while maintaining the base color's hue angle.
WCAG 2.1 Contrast Ratio
A measure of the difference in luminance between foreground text and background color (4.5:1 minimum required for normal text).