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)