Material Design Color Scale with CSS Variables

Building a Material Design Color Scale

Material Design uses a 10-step color scale (50 through 900) to create consistent UI palettes. CSS custom properties let you replicate this system without a preprocessor, making it easy to maintain and swap colors at runtime.

Shade Generation Strategy

The scale is built by fixing the hue and saturation of your base color in HSL, then walking the lightness axis from near-white to near-black:

:root {
  /* indigo scale */
  --indigo-50:  hsl(231, 48%, 97%);
  --indigo-100: hsl(231, 48%, 94%);
  --indigo-200: hsl(231, 48%, 86%);
  --indigo-300: hsl(231, 48%, 77%);
  --indigo-400: hsl(231, 48%, 66%);
  --indigo-500: hsl(231, 48%, 50%);
  --indigo-600: hsl(231, 48%, 40%);
  --indigo-700: hsl(231, 48%, 32%);
  --indigo-800: hsl(231, 48%, 24%);
  --indigo-900: hsl(231, 48%, 17%);
  --indigo-950: hsl(231, 48%, 10%);
}

Why 11 Steps?

The extra 950 step extends the original Material palette with a near-black tone that is essential for dark-mode backgrounds. It bridges the gap between 900 and pure black, preventing harsh contrast jumps.

Maintaining Contrast

Each step should maintain at least a 4.5:1 contrast ratio against its intended text color. Shades 50–300 are typically paired with 900 text; shades 600–950 with 50 text. Test pairings with a contrast checker before shipping.

Using Scales in Components

Reference the scale in component styles instead of hard-coded values:

.button-primary {
  background: var(--indigo-500);
  color: var(--indigo-50);
}
.button-primary:hover {
  background: var(--indigo-600);
}

This lets you swap the entire color family by changing a single variable block.