Clay & Stone color palette
Warm neutrals step from pale sandstone #E8D5B7 to walnut #4A3728, like a cross-section of a canyon wall. Saturation is low throughout, so the browns read as natural materials and the set feels quiet and handmade. With a light end and a very dark end, it covers both background and text on its own. Architects, furniture makers, ceramicists and coffee roasters fit it well.
Clay & Stone palette in use
Set the page in #E8D5B7 and the text in #4A3728. #A67C52 is a good button color, #7D5A3C works for headings and footers, and #C8A97E for borders and dividers.
This pair measures 7.83:1, so it works for body text too. The button uses #A67C52 with black text.
ButtonGood for
- Architecture portfolio
- Furniture maker website
- Coffee roaster packaging
- Ceramics studio branding
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 |
|---|---|---|---|
#4A3728 | #E8D5B7 | 7.83:1 | AAA |
#4A3728 | #C8A97E | 5.04:1 | AA |
#7D5A3C | #E8D5B7 | 4.30:1 | AA large |
#4A3728 | #A67C52 | 3.01:1 | AA large |
Clay & Stone palette as code
CSS variables
:root {
--clay-and-stone-1: #E8D5B7;
--clay-and-stone-2: #C8A97E;
--clay-and-stone-3: #A67C52;
--clay-and-stone-4: #7D5A3C;
--clay-and-stone-5: #4A3728;
}Tailwind v4
@theme {
--color-clay-and-stone-1: #E8D5B7;
--color-clay-and-stone-2: #C8A97E;
--color-clay-and-stone-3: #A67C52;
--color-clay-and-stone-4: #7D5A3C;
--color-clay-and-stone-5: #4A3728;
}Tailwind v3
// tailwind.config.js → theme.extend.colors
'clay-and-stone': {
100: '#E8D5B7',
200: '#C8A97E',
300: '#A67C52',
400: '#7D5A3C',
500: '#4A3728',
},SCSS
$clay-and-stone-1: #E8D5B7;
$clay-and-stone-2: #C8A97E;
$clay-and-stone-3: #A67C52;
$clay-and-stone-4: #7D5A3C;
$clay-and-stone-5: #4A3728;JSON
["#E8D5B7","#C8A97E","#A67C52","#7D5A3C","#4A3728"]Named colors in this palette
The nearest named color to each swatch, with its meaning and matching colors.