🎨 Color Tools

Color Shades Generator

Generate a 10-step tint and shade scale from any color. Perfect for design systems. Export as CSS variables, Tailwind config or hex array.

The Shades Generator is a free online tool that helps you generate a 10-step tint and shade scale from any color. perfect for design systems. export as css variables, tailwind config or hex array It runs in your browser with no sign-up, downloads, or installation needed. All processing happens locally — your data stays on your device.
Shades Generator 




        

      


      

        
How to use the Shades Generator

        



  
1

  

    
Choose your base color

    
Pick a color using the visual picker or type a hex code. The tool generates a full scale of tints (lighter) and shades (darker), with your base color positioned in the middle. The scale follows a perceptually uniform progression so each step looks visually equal in distance.

  





  
2

  

    
10-step scale for design systems

    
The 10-step scale (50, 100, 200 ... 900, 950) matches the format used by Tailwind CSS and many design systems. Use it to create a consistent color palette for your project where each weight has a predictable relationship to the others — 100 for backgrounds, 500 for primary elements, 900 for text.

  





  
3

  

    
Copy as CSS variables, Tailwind or array

    
Switch between output formats using the tabs. CSS variables format outputs :root { --name-50: ...; } ready to paste into your stylesheet. Tailwind format outputs the extend.colors object for tailwind.config.js. Array format gives a JavaScript array of hex values.

  





      

      
      

    


      

        
Frequently asked questions

        

          

            Is the Shades Generator free to use?
            
Yes, the Shades Generator is completely free. There is no sign-up, no account required, and no limit on how often you can use it.

          

          

            What colour formats does the Shades Generator support?
            
The Shades Generator works with HEX, RGB and HSL colour formats. You can convert between them and copy any value with one click.

          

          

            What devices does the Shades Generator work on?
            
The Shades Generator works on any device with a modern web browser — desktop, laptop, tablet, or phone. It is mobile-friendly and works offline once the page has loaded.