Cocoa Clay color palette
Muted browns with a reddish undertone, from dark cocoa #5D4037 and walnut #795548 to mushroom #A1887F, pale clay #D7CCC8 and off-white #EFEBE9. Saturation is low across the board, so it reads natural and unhurried. Having both a dark end and a near-white end makes text easy. Eco nonprofits and coffee subscriptions will find it a calm, honest base.
Cocoa Clay palette in use
Put #5D4037 text on an #EFEBE9 background. #795548 makes the button color, #D7CCC8 suits cards and borders, and #A1887F icons and dividers.
This pair measures 7.86:1, so it works for body text too. The button uses #795548 with white text.
ButtonGood for
- Eco nonprofit website
- Coffee subscription box
- Note-taking app
- Organic farm newsletter
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 |
|---|---|---|---|
#5D4037 | #EFEBE9 | 7.86:1 | AAA |
#5D4037 | #D7CCC8 | 5.92:1 | AA |
#795548 | #EFEBE9 | 5.53:1 | AA |
#795548 | #D7CCC8 | 4.16:1 | AA large |
Cocoa Clay palette as code
CSS variables
:root {
--cocoa-clay-1: #5D4037;
--cocoa-clay-2: #795548;
--cocoa-clay-3: #A1887F;
--cocoa-clay-4: #D7CCC8;
--cocoa-clay-5: #EFEBE9;
}Tailwind v4
@theme {
--color-cocoa-clay-1: #5D4037;
--color-cocoa-clay-2: #795548;
--color-cocoa-clay-3: #A1887F;
--color-cocoa-clay-4: #D7CCC8;
--color-cocoa-clay-5: #EFEBE9;
}Tailwind v3
// tailwind.config.js → theme.extend.colors
'cocoa-clay': {
100: '#5D4037',
200: '#795548',
300: '#A1887F',
400: '#D7CCC8',
500: '#EFEBE9',
},SCSS
$cocoa-clay-1: #5D4037;
$cocoa-clay-2: #795548;
$cocoa-clay-3: #A1887F;
$cocoa-clay-4: #D7CCC8;
$cocoa-clay-5: #EFEBE9;JSON
["#5D4037","#795548","#A1887F","#D7CCC8","#EFEBE9"]Named colors in this palette
The nearest named color to each swatch, with its meaning and matching colors.