CSS Color Palette Generator

Generate a complete CSS color scale (50 to 950) from any single base color — outputs ready-to-use CSS custom properties for your design system.

CSS Variables

        

        
      

      

      

        
What Does This Tool Do?

        
Generate a full 11-step color scale (50–950) from any base color, similar to Tailwind CSS color palettes. Outputs CSS custom properties ready to use in your design system.

      

      

        
Key Features

        

    
🎨
11 Shades
50, 100, 200 … 900, 950 — full Tailwind-style scale.

    
📋
CSS Variables
Outputs :root CSS custom properties.

    
🔧
Custom Name
Name your variable anything — primary, brand, etc.

    
⚡
Live
Updates instantly as you change the base color.

        

      

      

        
How to Use

        
  1. Pick your base color.
  2. Set the CSS variable name (e.g. primary, brand, accent).
  3. View the 11-shade palette.
  4. Copy the CSS variables to your design system.

      

      

        
Frequently Asked Questions

        

  
What is a color scale?▾
A systematic set of shades from very light to very dark for a single hue. Design systems like Tailwind CSS use 50–950 scales for consistent, flexible color usage.

  
Which shade should I use as my main color?▾
500 is typically the base/default. 600–700 for hover states. 100–200 for backgrounds. 800–900 for text. 50 for subtle tints.

  
What are CSS custom properties?▾
CSS variables defined in :root that can be referenced throughout your stylesheet with var(--color-primary-500). Changing the :root value updates it everywhere.