Tint your grays
Give grays a slight hue that matches the UI: cool slate or warm stone.
From refactoring-ui: Color, “Pure grays look lifeless — tint them”.
Pure gray vs tinted gray
Drag the tint, then mismatch the accent.
Pure grayBad
hsl(0 0% 47%)TintedGood
hsl(215 16% 47%)Borrow the brand's hue
Type a hex or pick a preset.
Neutral grayBad
Brand-tintedGood
const s = warm ? 6 : 12;
grays = L.map((l, i) => `hsl(${brandHue} ${s * K[i]}% ${l}%)`);Why it matters, pros and cons
Why it matters
Zero-saturation gray reads flat and lifeless. A few percent of the brand's hue makes neutrals and accent one palette.
Pros
- Neutrals and accent feel related.
- Lightness stays put, so contrast holds.
- Tailwind ships slate and stone.
Cons
- Past 20% saturation, grays stop being gray.
- Warm grays under a cool brand look dirty.
- Color tools and photo editors need true neutrals.