Neutral Gray Palette for UI Design

Designing a Neutral Gray Palette

Every design system needs a robust gray scale. Neutrals handle backgrounds, surfaces, borders, dividers, placeholder text, and disabled states. Getting the scale right is critical — too few steps and you lack nuance; too many and the system becomes unwieldy.

Choosing Undertones

Pure grays (0% saturation) can look flat and lifeless. Adding a slight warm or cool undertone improves visual consistency:

:root {
  /* cool gray with blue undertone (S=7%) */
  --gray-50:  hsl(220, 7%, 97%);
  --gray-100: hsl(220, 7%, 94%);
  --gray-200: hsl(220, 7%, 86%);
  --gray-300: hsl(220, 7%, 77%);
  --gray-400: hsl(220, 7%, 56%);
  --gray-500: hsl(220, 7%, 46%);
  --gray-600: hsl(220, 7%, 36%);
  --gray-700: hsl(220, 7%, 27%);
  --gray-800: hsl(220, 7%, 18%);
  --gray-900: hsl(220, 7%, 11%);
  --gray-950: hsl(220, 7%, 6%);
}

Light vs Dark Role Assignment

Role	Light theme	Dark theme
Page background	gray-50	gray-950
Card surface	white	gray-900
Muted text	gray-500	gray-400
Border	gray-200	gray-800
Disabled state	gray-300	gray-700

Why Not Pure Black/White?

Pure #000000 on #ffffff creates a contrast ratio of 21:1 — technically perfect but optically harsh. Dark-theme backgrounds around 5-8% lightness and light-theme text around 10-15% lightness feel more comfortable while easily exceeding WCAG AA requirements.

Pairing with Brand Colors

Keep your gray hue close to your primary brand hue for visual harmony. If your brand is blue, a cool gray (hue ~220) complements it. For warm brands (orange, red), try a warm gray (hue ~30).