Color Shades Generator
Generate 10 Tailwind-style shades (50–900) from any base color. Click a swatch to copy HEX. Export as CSS variables.
:root {
--color-50: #f0f6fe;
--color-100: #e2ecfe;
--color-200: #c0d7fc;
--color-300: #94bbfa;
--color-400: #5e99f7;
--color-500: #2474f5;
--color-600: #0a56d1;
--color-700: #07409c;
--color-800: #052e70;
--color-900: #031c44;
}How to Use
- 1. Pick a base color with the color picker or enter a HEX code.
- 2. 10 shades from 50 (lightest) to 900 (darkest) are generated automatically.
- 3. Click any shade in the color bar to copy its HEX code.
- 4. Click "Copy CSS" to copy all shades as CSS custom properties.
About Color Shades Generator
Color shades are an essential concept in modern UI design. Frameworks like Tailwind CSS popularized a systematic approach to color scales, using numeric labels from 50 (near white) to 900 (near black) to represent a full range of tints and shades derived from a single hue.
This generator takes any HEX color as input, extracts its hue and saturation, and distributes lightness values across 10 steps to create a cohesive shade palette. The result mirrors the structure of Tailwind's built-in colors, making it easy to extend your tailwind.config.js with custom brand colors that feel right at home in the framework.
The CSS variables output is ready to paste into your stylesheet as CSS custom properties. This makes it easy to build themeable design systems where you can swap the entire color palette by changing a few variable values. All generation happens in your browser — no data is transmitted.
You may also find our Color Palette Generator and CSS to Tailwind Color helpful.
Frequently Asked Questions
What are color shades?
Color shades are variations of a base color ranging from very light (tints) to very dark (shades) by adjusting the lightness in HSL color space. Tailwind CSS uses a 50–900 scale.
How does the 50-900 scale work?
The scale goes from 50 (lightest/near white) to 900 (darkest/near black). 500 is typically closest to the base color. This mirrors how Tailwind CSS generates its color palettes.
What are CSS custom properties?
CSS custom properties (variables) allow you to define a color once and reuse it across your stylesheet. They enable dynamic theming and are defined with --variable-name syntax.
Can I use these shades in Tailwind?
Yes! You can extend your tailwind.config.js with these generated shades. The CSS variable output is also useful for custom design systems and component libraries.
How accurate are the shades?
The shades are generated by distributing lightness evenly across the HSL scale. They closely approximate Tailwind's algorithm, though exact matching requires Tailwind's specific reference colors.
Was this tool helpful?
More Tools
Related Color Tools
Color Palette Generator
Contrast Checker
Image Color Extractor
CSS to Tailwind Color
You Might Also Like