What is a color scale?

A color scale (or ramp) is a single hue expressed at many lightness levels — typically 50 through 950 — so an interface can use the same color for subtle backgrounds, borders, buttons and text without picking new colors by hand.

Why do the steps go 50 to 950?

The convention comes from Tailwind CSS and most modern design systems: 50 is the lightest tint, 500 sits near the base brand color, and 950 is the darkest shade. Numeric steps make dark-mode swaps mechanical — usually 500 becomes 400 and 100 becomes 900.

Which generation space should I choose?

OKLCH by default: lightness steps look evenly spaced, and chroma is reduced at the extremes so tints do not look muddy. OKHSL is useful when you want saturation to behave like HSL while keeping perceptual lightness. HSL and RGB are provided for parity with legacy systems.

Are the generated colors always valid on screen?

Yes. Every step is clamped back into the sRGB gamut, so what you copy renders identically in browsers that do not support wide-gamut output.

Color Scale Generator

One color in, an 11-step 50–950 ramp out. Generated in OKLCH so lightness steps look evenly spaced, then exported as CSS variables, JSON or a Tailwind v4 theme.

oklch(0.5854 0.2041 277.12)

sRGB

Color value

Lightness0.585

Chroma0.204

Hue277.117°

Generate using

Token name

Copy as

scale.css

:root {
  --primary-50: oklch(0.971 0.014 277.1); /* #f3f5ff */
  --primary-100: oklch(0.936 0.031 277.1); /* #e4e9ff */
  --primary-200: oklch(0.885 0.056 277.1); /* #cfd6ff */
  --primary-300: oklch(0.808 0.097 277.1); /* #b0bbff */
  --primary-400: oklch(0.712 0.151 277.1); /* #8b97ff */
  --primary-500: oklch(0.637 0.197 277.1); /* #7178ff */
  --primary-600: oklch(0.577 0.21 277.1); /* #6062f1 */
  --primary-700: oklch(0.505 0.197 277.1); /* #4f4ed1 */
  --primary-800: oklch(0.444 0.176 277.1); /* #413fb1 */
  --primary-900: oklch(0.396 0.159 277.1); /* #363599 */
  --primary-950: oklch(0.281 0.111 277.1); /* #1f1e5e */
}

How the ramp is built

The generator keeps your hue, then walks a fixed set of OKLCH lightness targets from 0.971 at step 50 down to 0.281 at step 950. Chroma follows a bell curve: reduced near the extremes, peaking around 400–500. That is what stops light tints from looking dirty and dark shades from turning into flat near-black.

Using a ramp in light and dark mode

Assign semantic meaning to steps rather than reaching for raw numbers in components: 50 and 100 for surfaces, 200 for borders, 500–600 for interactive fills, 700+ for text on light backgrounds. In dark mode shift the same roles by roughly 400 steps — a 600 button becomes 400, a 100 surface becomes 900.

OKLCH vs HSL ramps

Try switching the generation space with the same base color. HSL ramps tend to lose saturation in the middle and shift hue at the ends; OKLCH keeps hue locked and lightness visually linear. If you maintain an existing HSL system, generating in OKLCH and exporting HEX is the least disruptive upgrade path.

Frequently asked questions

What is a color scale?: A color scale (or ramp) is a single hue expressed at many lightness levels — typically 50 through 950 — so an interface can use the same color for subtle backgrounds, borders, buttons and text without picking new colors by hand.
Why do the steps go 50 to 950?: The convention comes from Tailwind CSS and most modern design systems: 50 is the lightest tint, 500 sits near the base brand color, and 950 is the darkest shade. Numeric steps make dark-mode swaps mechanical — usually 500 becomes 400 and 100 becomes 900.
Which generation space should I choose?: OKLCH by default: lightness steps look evenly spaced, and chroma is reduced at the extremes so tints do not look muddy. OKHSL is useful when you want saturation to behave like HSL while keeping perceptual lightness. HSL and RGB are provided for parity with legacy systems.
Are the generated colors always valid on screen?: Yes. Every step is clamped back into the sRGB gamut, so what you copy renders identically in browsers that do not support wide-gamut output.

Related tools

◐Palette Generator

Harmony-based palettes generated in OKLCH with locking, reordering and instant copy.

◈Design System From One Color

Primary, neutral, success, warning, danger ramps plus semantic light/dark tokens.

◑Contrast Checker

WCAG ratios plus perceptual OKLCH repair suggestions when a pair fails.