color-scale

name	color-scale
description	Generates perceptually uniform OKLCH color palettes from brand colors. Use when creating color systems, theme palettes, or converting hex values to 11-step scales. Outputs CSS custom properties, Tailwind config, or JSON tokens.

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

1. Get input: Ask for base color (hex preferred) and color name (e.g., "primary")
2. Ask format: CSS custom properties, Tailwind config, or JSON tokens?
3. 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)
4. Generate scale: Create 11 steps with consistent chroma/saturation
5. Add neutrals: Generate neutral scale using same hue, minimal saturation
6. Add semantics: Generate success, warning, error, info harmonized with brand
7. 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)