UI Color Palette Generator

Generate a complete 50–900 UI color scale from any base color. Perfect for design systems, Tailwind-style tokens, and any modern interface that needs a full lightness range.

CSS Design Tokens (50–900 Scale)


          

        

        
      

      

        
What Is a UI Color Scale?

        
A UI color scale (often called a "color ramp" or "color token scale") is a set of tints and shades of a base color, numbered 50 (lightest) through 900 (darkest). It is the backbone of modern design systems — Tailwind CSS, Material Design and every serious design system ship with these scales.

        
OmniColor's UI color palette generator produces a complete 50–900 scale from any base color in one click. Each step has a defined role: 50 for the lightest backgrounds, 500 for the primary state, 700 for active hover, 900 for text and headings.

        
The 50–900 Scale Explained

        
    
          
  • 50: Lightest tint — subtle backgrounds and highlight rows.
    • 
          
  • 100: Light surface — cards, panels.
    • 
          
  • 200: Border subtle — dividers.
    • 
          
  • 300: Border — clear separations.
    • 
          
  • 400: Disabled — visually muted states.
    • 
          
  • 500: Base — the primary brand color at its intended saturation.
    • 
          
  • 600: Hover — slightly darker for interactive feedback.
    • 
          
  • 700: Active — pressed states and emphasis.
    • 
          
  • 800: Strong text — headings and high-emphasis content.
    • 
          
  • 900: Darkest — body text on light backgrounds.
    • 
        

        
How the Generator Works

        
OmniColor computes each step by decreasing lightness in regular intervals while slightly reducing saturation toward the extremes. This mimics how professional color scales look — light steps are less saturated (close to white), dark steps are less saturated (close to black) — producing a visually even scale rather than a garish gradient.

        
When to Use This Tool

        
    
          
  • Design systems: Generate the base palette for a new design system in one click.
    • 
          
  • Tailwind config: Drop the tokens straight into your Tailwind configuration.
    • 
          
  • Component states: Every component needs hover, active, disabled and focus states — the 50–900 scale provides them.
    • 
          
  • Dark/light mode: Use 50–200 for light mode backgrounds, 800–900 for dark mode surfaces.
    • 
        

        
Frequently Asked Questions