Generate a Brand Color Shade Scale

A Complete Shade Scale in Plain CSS

Modern design systems ship a 50–950 shade scale per color. With color-mix() you can derive that scale from a single source-of-truth token, no preprocessor required.

:root {
  --brand-500: #2563eb;
}

:root {
  --brand-50:  color-mix(in oklch, var(--brand-500), white 92%);
  --brand-100: color-mix(in oklch, var(--brand-500), white 84%);
  --brand-200: color-mix(in oklch, var(--brand-500), white 68%);
  --brand-300: color-mix(in oklch, var(--brand-500), white 48%);
  --brand-400: color-mix(in oklch, var(--brand-500), white 24%);
  --brand-600: color-mix(in oklch, var(--brand-500), black 18%);
  --brand-700: color-mix(in oklch, var(--brand-500), black 36%);
  --brand-800: color-mix(in oklch, var(--brand-500), black 54%);
  --brand-900: color-mix(in oklch, var(--brand-500), black 72%);
  --brand-950: color-mix(in oklch, var(--brand-500), black 86%);
}

Tuning the curve

The percentages above produce a perceptually even curve when measured in OKLCH. You can adjust them per brand — colors that start very light (yellows) need less white at the low end, colors that start very dark (deep blues) need less black at the top.

Pair with currentColor to theme components

Once the scale exists as variables, components can do:

.button {
  background: var(--brand-500);
}
.button:hover {
  background: var(--brand-600);
}

…and a single --brand-500 swap re-themes everything. Combine with the CSS variable generator to scaffold the rest of your tokens.