Color Shades Generator – Create UI Color Scales
About the Color Shades Generator
The Color Shades Generator creates a full lightness scale from a single base color, ranging from 5 to 15 shades from very light to very dark while keeping the same hue and saturation. Pick a color, choose how many shades you need, and export the entire scale as CSS variables or a downloadable JSON file in HEX, RGB, or HSL format.
It’s built for developers building design systems that need consistent tonal scales, like a “blue-100” through “blue-900” ramp for buttons, backgrounds, and text. Once you’ve generated your shade scale, the Color Palette Generator is useful for building a full multi-hue UI palette, and the Color Converter helps translate individual shades between formats.
The BigToolSite Team tested every shade count from 5 to 15 across a range of base colors to confirm the lightness steps stay evenly distributed and each hex, RGB, and HSL value converts accurately.
How to Use the Color Shades Generator
- Pick a Base Color using the color picker or type a hex code directly.
- Choose the number of Shades (5 to 15) for your scale.
- Select your preferred Format: HEX, RGB, or HSL.
- Click Generate to produce the full lightness scale.
- Click any shade card to copy its value, or use Copy CSS or Download JSON to export the whole scale.
Example Usage
Input: Base Color: #3B82F6 (blue), Shades: 9
Output: A 9-step scale from a very light near-white blue tint through the base blue to a very dark near-black blue shade, exported as –color-1 through –color-9 CSS variables.
Use a smaller shade count like 5 for a simple UI with light/base/dark variants, or 15 for a fine-grained design system scale similar to Tailwind’s color palette structure.
Frequently Asked Questions
This tool creates a single-hue lightness scale (like light-to-dark shades of one blue), while the Color Palette Generator creates a 5-color scheme using multiple related hues for a full UI palette.
9 or 11 shades is common for design systems (similar to Tailwind CSS’s default scale), giving enough steps for backgrounds, borders, text, and hover states without excessive granularity.
The tool keeps your base color’s hue and saturation constant and only varies the lightness, which produces a clean, evenly-stepped scale from your original color.
Yes, there’s a text input next to the color picker where you can type or paste any 6-digit hex code directly.
Yes, it’s completely free with no signup required.
