🎨 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.

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.