Warm Concrete color palette
These five neutrals are gray with a little warmth mixed in, the shade often called greige. #F5F0EB is close to off-white and #9A8B7D is a mid mushroom taupe, but nothing here gets dark. The result is quiet and photo-friendly, a good frame for pictures of rooms or products. Interior designers, real estate listings, skincare brands and minimal portfolios can lean on it.
Warm Concrete palette in use
Lay the page in #F5F0EB and the cards in #E8DDD4. #9A8B7D works for borders and for buttons with large white labels, while body text needs a deep charcoal brown.
This pair measures 18.54:1, so it works for body text too. The button uses #B8A898 with black text.
ButtonGood for
- Interior design portfolio
- Real estate listing
- Minimal skincare brand
- Photography website
Readable color pairs
No two colors in this palette reach 3:1 contrast, so use it for backgrounds and shapes, and set text in white or black. Check any pair in the contrast checker.
Warm Concrete palette as code
CSS variables
:root {
--warm-concrete-1: #F5F0EB;
--warm-concrete-2: #E8DDD4;
--warm-concrete-3: #D4C5B5;
--warm-concrete-4: #B8A898;
--warm-concrete-5: #9A8B7D;
}Tailwind v4
@theme {
--color-warm-concrete-1: #F5F0EB;
--color-warm-concrete-2: #E8DDD4;
--color-warm-concrete-3: #D4C5B5;
--color-warm-concrete-4: #B8A898;
--color-warm-concrete-5: #9A8B7D;
}Tailwind v3
// tailwind.config.js → theme.extend.colors
'warm-concrete': {
100: '#F5F0EB',
200: '#E8DDD4',
300: '#D4C5B5',
400: '#B8A898',
500: '#9A8B7D',
},SCSS
$warm-concrete-1: #F5F0EB;
$warm-concrete-2: #E8DDD4;
$warm-concrete-3: #D4C5B5;
$warm-concrete-4: #B8A898;
$warm-concrete-5: #9A8B7D;JSON
["#F5F0EB","#E8DDD4","#D4C5B5","#B8A898","#9A8B7D"]Named colors in this palette
The nearest named color to each swatch, with its meaning and matching colors.