Color Shades Generator
Generate a full range of light and dark shades from any base color — perfect for building color palettes.
What Does This Tool Do?
Enter a HEX color and get a full spectrum of shades from near-white to near-black, all sharing the same hue.
Key Features
Full Spectrum
Generates multiple shades from lightest to darkest.
Click to Copy
Click any swatch to copy the HEX value.
Instant
Shades appear immediately.
Custom Count
Control how many shades to generate.
How to Use This Tool
- Enter a base HEX color.
- Choose number of shades.
- Click Generate to see the palette.
- Click any swatch to copy its HEX value.
How It Works
The base color is converted to HSL. Lightness is varied from 10% to 90% in equal steps while keeping hue and saturation constant.
Common Use Cases
💡 UI Design
Generate button state colors from a brand primary.
💡 Tailwind CSS
Build a custom color scale like Tailwind's 50-900 system.
💡 Data Visualization
Create monochromatic scales for charts and heatmaps.
Frequently Asked Questions
What HEX format should I use?
Enter a 6-digit HEX code like #3b82f6. Both with and without the # are accepted.
Related Tools
Link to This Tool
Copy and paste the code below to link to this tool from your website:
<a href="https://adedx.com/tools/color-shades/">Color Shades Generator — AdeDX Free Online Tools</a>