If you counted every pixel on a typical website by color family, grays would dominate overwhelmingly. Borders, dividers, muted text, placeholder text, disabled buttons, card backgrounds, input backgrounds, shadow colors, icon fills: gray is the workhorse of web design.
Warm Gray vs. Cool Gray
Not all grays are neutral. A gray with a slight blue or purple undertone feels cool and technical. A gray with a slight yellow or brown undertone feels warm and organic. The temperature of your grays should match your brand personality and complement your chromatic colors.
Cool grays pair naturally with blue-dominant palettes. Warm grays pair with earth tones, oranges, and reds. Mixing warm grays with a cool primary can create interesting tension, but it requires a deliberate hand.
The Gray Scale You Need
Most design systems need 5 to 8 gray tones: a near-white for page backgrounds, a slightly darker tone for card surfaces, a mid-light tone for borders and dividers, a medium tone for placeholder text and disabled states, a medium-dark tone for secondary text and icons, and a near-black for body text and headings.
Grays and Your PaletteRx Palette
PaletteRx's Light Base and Dark Base roles capture the two extremes of your gray scale. The intermediate grays are derived from these anchors. When you export to CSS Variables, your bases provide the endpoints. Use CSS color-mix() or manual intermediate values to fill in the steps between them.
The Tinted Gray Trick
Instead of pure gray (equal R, G, B values), use grays that are slightly tinted with your primary color. This creates visual cohesion: every neutral element on the page subtly reinforces your brand. A blue-tinted gray (#64748b) on a blue-primary site feels intentional, while a pure gray (#808080) feels disconnected.