Tailwind CSS Color Generator

Base Color
Color Name
Scale Logic
#6366F1 

                
            

        


    







 


    
Live Design Preview

    

        
        

            
New Feature

            
Automated Workflows

            
Boost your productivity with our new intelligent automation engine. Set it up once and let it handle the heavy lifting for you.

            
        


        
        

            

                
            

            
Total Revenue

            
$42,500.00

            
+12.5% from last month

            

                

            

        


        
        

            
Dark Interaction

            
See how the scale performs in dark theme contexts. Higher shades provide depth and visibility.

            

                
                
            

        


        
        

            
Premium Access

            
Experience the full power of our platform with background-colored UI elements. This demonstrates the vibrancy of your mid-range shades.

            
        


        
        

            

                
PG

                

                    
Peter Griffin

                    
Product Designer

                

            

            
Peter has been using the brand palette for over 3 years to create stunning user interfaces.

        


        
        

            
Best Value

            
Enterprise

            

                $99
                /mo
            

            
    
                
  •  Unlimited Users
    • 
                
  •  24/7 Support
    • 
            

            
        


    








    
Tailwind CSS Color Conventions

    
In a professional design system, colors are rarely used in isolation. Instead, they are often defined as a 10-step scale spanning from 50 (lightest) to 950 (darkest). This generator helps you craft consistent scales that feel native to Tailwind's default palette.


    
Tailwind CSS v4 Integration

    
Tailwind CSS v4 introduces a new way to define themes directly in your CSS file using the @theme block. Instead of modifying a tailwind.config.js file, you now use CSS variables. Our generated code provides the variables and the mapping required for the v4 compiler to recognize your new utility classes like bg-brand-500.


    
How the shades are generated

    
To ensure your custom color scales look natural, this tool uses the HSL (Hue, Saturation, Lightness) color space. It automatically preserves the base hue of your selected color while mathematically adjusting the saturation and lightness to create the full spectrum of shades. You can use the "Adjust" sliders to fine-tune the vibrancy of the lighter and darker ends of the scale.


    
Choosing a Color Name

    
When picking a name for your color, avoid literal names like "red" or "blue" if you intend to use them for branding. Using semantic names like primary, brand, or cta makes your code more maintainable should you decide to change your brand's color later.