Brick & Mortar color palette
Old red brick and the mortar between it. #8B3A3A is a dark, weathered brick, #B56060 a dusty rose, and #D4A0A0, #E8D0D0 and #F5ECEC fade toward plaster white. It's warm and muted, with the steady feel of a neighborhood main street. Independent shops and real estate agents can use it to look local and established.
Brick & Mortar palette in use
Make #F5ECEC the background and #8B3A3A the text and heading color. #B56060 works for buttons, and #E8D0D0 and #D4A0A0 for cards, borders and dividers.
This pair measures 6.54:1, so it works for body text too. The button uses #B56060 with black text.
ButtonGood for
- Local shop website
- Real estate listing page
- Historic society brochure
- Wine bar menu
Readable color pairs
Pairs from this palette with at least 3:1 contrast (WCAG 2). Use AA and AAA pairs for body text, and AA large pairs for headings 24px and up.
| Text | Background | Ratio | Rating |
|---|---|---|---|
#8B3A3A | #F5ECEC | 6.54:1 | AA |
#8B3A3A | #E8D0D0 | 5.19:1 | AA |
#B56060 | #F5ECEC | 3.76:1 | AA large |
#8B3A3A | #D4A0A0 | 3.37:1 | AA large |
Brick & Mortar palette as code
CSS variables
:root {
--brick-and-mortar-1: #8B3A3A;
--brick-and-mortar-2: #B56060;
--brick-and-mortar-3: #D4A0A0;
--brick-and-mortar-4: #E8D0D0;
--brick-and-mortar-5: #F5ECEC;
}Tailwind v4
@theme {
--color-brick-and-mortar-1: #8B3A3A;
--color-brick-and-mortar-2: #B56060;
--color-brick-and-mortar-3: #D4A0A0;
--color-brick-and-mortar-4: #E8D0D0;
--color-brick-and-mortar-5: #F5ECEC;
}Tailwind v3
// tailwind.config.js → theme.extend.colors
'brick-and-mortar': {
100: '#8B3A3A',
200: '#B56060',
300: '#D4A0A0',
400: '#E8D0D0',
500: '#F5ECEC',
},SCSS
$brick-and-mortar-1: #8B3A3A;
$brick-and-mortar-2: #B56060;
$brick-and-mortar-3: #D4A0A0;
$brick-and-mortar-4: #E8D0D0;
$brick-and-mortar-5: #F5ECEC;JSON
["#8B3A3A","#B56060","#D4A0A0","#E8D0D0","#F5ECEC"]Named colors in this palette
The nearest named color to each swatch, with its meaning and matching colors.