Color Scale Generator Skill

Color Scale Generator

Overview

Generate perceptually uniform 11-step color scales (50-950) from any base color. Includes auto-generated neutral and semantic colors harmonized with the brand.

When to Use

Starting a new project needing a color system
Adding brand colors to an existing palette
Building light/dark theme tokens
Converting a single hex to a full scale

Quick Reference

| Step | Lightness | Typical Use | |------|-----------|-------------| | 50 | 97% | Subtle backgrounds | | 100 | 93% | Hover states on light | | 200 | 87% | Borders, dividers | | 300 | 78% | Disabled states | | 400 | 65% | Placeholder text | | 500 | 55% | Primary brand color | | 600 | 45% | Hover on dark | | 700 | 37% | Active states | | 800 | 27% | Headings | | 900 | 20% | Body text | | 950 | 14% | High contrast text |

The Process

Get input: Ask for base color (hex preferred) and color name (e.g., "primary")
Ask format: CSS custom properties, Tailwind config, or JSON tokens?
Ask color system (default OKLCH):
- OKLCH - Perceptually uniform, modern standard (recommended)
- HSL - Hue, Saturation, Lightness (wide browser support)
- RGB - Red, Green, Blue (universal compatibility)
- LCH - Lightness, Chroma, Hue (perceptual, CSS Color 4)
- HEX - Hexadecimal notation (maximum compatibility)
Generate scale: Create 11 steps with consistent chroma/saturation
Add neutrals: Generate neutral scale using same hue, minimal saturation
Add semantics: Generate success, warning, error, info harmonized with brand
Output: Provide complete token set in requested format

Color Systems

| System | Format Example | Best For | |--------|----------------|----------| | OKLCH | oklch(55% 0.15 250) | Modern browsers, perceptual accuracy | | HSL | hsl(220 80% 55%) | Wide support, intuitive adjustments | | RGB | rgb(59 130 246) | Universal, legacy systems | | LCH | lch(55% 60 250) | Perceptual, CSS Color Level 4 | | HEX | #3b82f6 | Maximum compatibility |

Recommend OKLCH for new projects - it produces more visually consistent scales because lightness and chroma are perceptually uniform.

Output Formats

CSS Custom Properties:

:root {
  --primary-50: oklch(97% 0.01 250);
  --primary-500: oklch(55% 0.15 250);
  --primary-950: oklch(14% 0.10 250);
}

Tailwind Config:

module.exports = {
  theme: {
    extend: {
      colors: {
        primary: {
          50: 'oklch(97% 0.01 250)',
          500: 'oklch(55% 0.15 250)',
        }
      }
    }
  }
}

JSON Tokens:

{
  "color": {
    "primary": {
      "50": { "value": "oklch(97% 0.01 250)" },
      "500": { "value": "oklch(55% 0.15 250)" }
    }
  }
}

Algorithm Details

Lightness stops (L values):

50: 0.97, 100: 0.93, 200: 0.87, 300: 0.78, 400: 0.65
500: 0.55, 600: 0.45, 700: 0.37, 800: 0.27, 900: 0.20, 950: 0.14

Chroma/saturation adjustment at extremes:

L > 0.9: reduce to 30% (prevents washed-out pastels)
L < 0.2: reduce to 70% (prevents muddy darks)
Otherwise: full chroma

Semantic color hues (harmonized 10-15% toward brand):

Success: base 145 (green)
Warning: base 70 (amber)
Error: base 25 (red)
Info: base 250 (blue)

Agent Skills: Color Scale Generator

Install this agent skill to your local

Skill Files