Color Shade Generator
Generate tints and shades of any color for design systems
Quick presets
Scale type
Display format
All Values
Click any value to copy
| Swatch | Step | HEX | RGB | HSL |
|---|---|---|---|---|
| 50 | ||||
| 100 | ||||
| 200 | ||||
| 300 | ||||
| 400 | ||||
| 500 | ||||
| 600 | ||||
| 700 | ||||
| 800 | ||||
| 900 | ||||
| 950 |
Was this tool helpful?
What is Color Shade Generator?
Free online color shade generator to generate a complete range of light to dark shades from any base color.
Enter a color and get 10+ carefully calculated shades from near-white to near-black, similar to Tailwind CSS color scales. Perfect for building design systems, creating accessible color palettes, and finding the right shade for hover states, backgrounds, and borders. Copy individual shades as HEX, RGB, or HSL values. No signup required.
How to Use Color Shade Generator
- 1Enter a base color using the color picker or type a HEX code
- 2View the generated shade scale from lightest (50) to darkest (950)
- 3Click any shade to copy its HEX value
- 4Copy the entire palette as CSS variables or Tailwind config
Frequently Asked Questions
Related Tools
Color Palette Generator
Free online color palette generator - generate beautiful color palettes from any base color
Design Token Converter
Free online design token converter - convert design tokens between CSS, SCSS, Tailwind, and more
CSS Box Shadow Generator
Free online CSS box shadow generator - create beautiful CSS box shadows with a visual builder and live preview
CSS Gradient Generator
Free online CSS gradient generator - create beautiful CSS gradients with a visual editor and live preview
Placeholder Image Generator
Free online placeholder image generator - generate customizable placeholder images for your designs and prototypes
Neumorphism Generator
Free online neumorphism generator - generate soft UI neumorphic CSS styles