Concrete
#d2d1cd
Softer, warmer concrete gray for airy grids
About Concrete
Concrete is the one that actually feels like a surface. Not a background pretending to be neutral, not a warm gray trying to seem restraint, this sits noticeably cooler and tighter than Athena or Cocoon, with less breathing room. It's darker than both, grounded enough that it reads as intentional rather than default.
Use it where you need real structure behind type but can't go full charcoal. Financial dashboards, legal platforms, dense editorial layouts where the page itself has to feel substantial. It pairs well with black text, holds photography without fussiness, and works in long-form reading interfaces because the coolness keeps it from warming under fluorescent light or shifting on different screens the way warmer grays do. It's the color that stops drifting, which matters when you're staring at it for hours.
Pair it with restrained, cool-leaning accents and you're fine. Push warm creams or sandy tones against it and there's temperature tension, not a deal-breaker, just something to know going in.
Code snippets
Copy this color into your project.
Contrast checker
WCAG 2.1 contrast ratios. AA requires 4.5:1 for normal text, 3:1 for large. AAA requires 7:1 / 4.5:1.
On White #ffffff
On Gray 100 #f5f5f5
On Gray 900 #18181b
On Black #000000
Variations
Shades
Darker variations, created by mixing toward black.
Tints
Lighter variations, created by mixing toward white.
Tones
Muted variations, created by reducing saturation.
Hues
Hue rotations around the color wheel.
Temperatures
Warm and cool shifts of this color.
Color harmonies
Suggested palettes
Palettes built around this color.
Community palettes
Published palettes that include this color.