How to Create Color Scales and Gradient Ramps

What Color Scales Are For

A color scale is a systematic range from very light to very dark in 10 steps (50–900). Design systems like Tailwind, Material, and Radix use this pattern because it gives designers predetermined options guaranteed to work together. Instead of picking arbitrary shades, you select from the scale: blue-100 for backgrounds, blue-500 for buttons, blue-900 for text. This eliminates inconsistency and makes decisions faster across large teams.

Generating Perceptually Even Steps

The key to professional scales is perceptual uniformity — each step should feel like the same change. In HSL, equal lightness steps produce uneven visual results. OKLCH solves this: set your hue and chroma, then step lightness from 0.97 (step 50) to 0.15 (step 900) evenly. Decrease chroma slightly at extremes — very light and dark shades look more natural with lower saturation. Use the Shade & Tint Generator to produce these scales automatically, or fine-tune each step by eye after generation.

Dark Mode Considerations

Dark mode requires adjusting how you use the scale, not rebuilding it. Light mode: light steps (50–200) for backgrounds, dark steps (700–900) for text. Dark mode: flip — dark steps for backgrounds, light steps for text. But the interactive range (400–600) may need adjustment — colors that look great on white can look dull on dark backgrounds. Create separate interactive color tokens for dark mode, typically 1–2 steps lighter and slightly more saturated. Test both modes with the Contrast Checker.

Using Scales in Design Tokens

Store your scale as design tokens — platform-agnostic key-value pairs consumed by CSS, React, iOS, and Android. Define semantic tokens on top: --color-text-primary: var(--gray-900) for light mode, overridden to var(--gray-100) in dark mode. Semantic tokens let you change the underlying scale without touching component code. Export as CSS custom properties for web, JSON for JavaScript, XML for mobile. This architecture scales from personal projects to large design systems.