Color Shades Generator
Generate 11 shades (50-950) from a base color, similar to the Tailwind CSS color system, with multiple export formats.
Base Color
Preset Colors
Export Code
:root {
--indigo-50: #f3f3fb;
--indigo-100: #e6e6f9;
--indigo-200: #c5c6f6;
--indigo-300: #9193f2;
--indigo-400: #4d4fef;
--indigo-500: #1418eb;
--indigo-600: #0c0fca;
--indigo-700: #070aa6;
--indigo-800: #05077f;
--indigo-900: #030563;
--indigo-950: #00013d;
}Shades Preview
indigoShade Bar
Text Contrast Preview
Shade 50
#f3f3fb
The quick brown fox jumps over the lazy dog.
Shade 100
#e6e6f9
The quick brown fox jumps over the lazy dog.
Shade 200
#c5c6f6
The quick brown fox jumps over the lazy dog.
Shade 300
#9193f2
The quick brown fox jumps over the lazy dog.
Shade 400
#4d4fef
The quick brown fox jumps over the lazy dog.
Shade 500
#1418eb
The quick brown fox jumps over the lazy dog.
Shade 600
#0c0fca
The quick brown fox jumps over the lazy dog.
Shade 700
#070aa6
The quick brown fox jumps over the lazy dog.
Shade 800
#05077f
The quick brown fox jumps over the lazy dog.
Shade 900
#030563
The quick brown fox jumps over the lazy dog.
Shade 950
#00013d
The quick brown fox jumps over the lazy dog.
Usage Instructions
Features
- Based on HSL color space, generates 11 shades (50-950) from a base color
- Shade system matches Tailwind CSS default shades, ready for direct use in projects
- Supports 4 export formats: CSS Variables, SCSS Map, Tailwind v4 @theme, JSON
- Built-in 17 preset colors, one-click apply for common brand colors
- Real-time preview of text contrast on each shade
- Click a shade row or shade bar to quickly copy the corresponding HEX value
Tips
- Click the color block on the left to open the system color picker
- Enter a HEX value (e.g., #6366f1) to specify a color precisely
- After entering a color name, variable names in exported code will be replaced automatically
- When exporting Tailwind v4 format, use the
@themedirective to configure custom colors - Hover over the shade bar to view the shade number, click to copy the HEX value
- Text contrast preview helps you choose the right text color combination