Sand Dunes color palette
Sand Dunes reads like the same dune at five times of day: pale morning sand #F0E6D3, wheat, golden tan, ochre and a toffee brown, #8B5E28. The hue barely moves, so the change is almost all lightness. It feels warm and dry. Desert tour operators, linen and rattan homeware, Moroccan restaurants and boho wedding planners can use it with little adjustment.
Sand Dunes palette in use
Text and headings go in #8B5E28 on a #F0E6D3 background. #B08040 suits buttons, and #DEC5A0 and #C9A96E fill cards, dividers and illustrations.
This pair measures 4.54:1, so it works for body text too. The button uses #B08040 with black text.
ButtonGood for
- Desert tour website
- Rattan homeware shop
- Moroccan restaurant menu
- Boho wedding invites
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 |
|---|---|---|---|
#8B5E28 | #F0E6D3 | 4.54:1 | AA |
#8B5E28 | #DEC5A0 | 3.37:1 | AA large |
Sand Dunes palette as code
CSS variables
:root {
--sand-dunes-1: #F0E6D3;
--sand-dunes-2: #DEC5A0;
--sand-dunes-3: #C9A96E;
--sand-dunes-4: #B08040;
--sand-dunes-5: #8B5E28;
}Tailwind v4
@theme {
--color-sand-dunes-1: #F0E6D3;
--color-sand-dunes-2: #DEC5A0;
--color-sand-dunes-3: #C9A96E;
--color-sand-dunes-4: #B08040;
--color-sand-dunes-5: #8B5E28;
}Tailwind v3
// tailwind.config.js → theme.extend.colors
'sand-dunes': {
100: '#F0E6D3',
200: '#DEC5A0',
300: '#C9A96E',
400: '#B08040',
500: '#8B5E28',
},SCSS
$sand-dunes-1: #F0E6D3;
$sand-dunes-2: #DEC5A0;
$sand-dunes-3: #C9A96E;
$sand-dunes-4: #B08040;
$sand-dunes-5: #8B5E28;JSON
["#F0E6D3","#DEC5A0","#C9A96E","#B08040","#8B5E28"]Named colors in this palette
The nearest named color to each swatch, with its meaning and matching colors.