Copper & Slate color palette
Copper #B87333 and bronze #CD7F32 bring a metallic warmth, and three grays, warm taupe #8C7B6B, mid #6B6B6B and dark slate #3D3D3D, keep it grounded. It looks like a workshop or a brewhouse. There's no light tone in the set, so add an off-white for backgrounds. Craft breweries and kitchenware brands are the best match.
Copper & Slate palette in use
On an off-white page, use #3D3D3D for text and #B87333 for buttons and headings. #6B6B6B suits secondary text, #8C7B6B borders, and #CD7F32 hover states and icons.
This pair measures 6.67:1, so it works for body text too. The button uses #B87333 with black text.
ButtonGood for
- Craft brewery website
- Industrial design portfolio
- Barbershop signage
- Kitchenware packaging
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 |
|---|---|---|---|
#3D3D3D | #CD7F32 | 3.45:1 | AA large |
Copper & Slate palette as code
CSS variables
:root {
--copper-and-slate-1: #B87333;
--copper-and-slate-2: #CD7F32;
--copper-and-slate-3: #8C7B6B;
--copper-and-slate-4: #6B6B6B;
--copper-and-slate-5: #3D3D3D;
}Tailwind v4
@theme {
--color-copper-and-slate-1: #B87333;
--color-copper-and-slate-2: #CD7F32;
--color-copper-and-slate-3: #8C7B6B;
--color-copper-and-slate-4: #6B6B6B;
--color-copper-and-slate-5: #3D3D3D;
}Tailwind v3
// tailwind.config.js → theme.extend.colors
'copper-and-slate': {
100: '#B87333',
200: '#CD7F32',
300: '#8C7B6B',
400: '#6B6B6B',
500: '#3D3D3D',
},SCSS
$copper-and-slate-1: #B87333;
$copper-and-slate-2: #CD7F32;
$copper-and-slate-3: #8C7B6B;
$copper-and-slate-4: #6B6B6B;
$copper-and-slate-5: #3D3D3D;JSON
["#B87333","#CD7F32","#8C7B6B","#6B6B6B","#3D3D3D"]Named colors in this palette
The nearest named color to each swatch, with its meaning and matching colors.