Desert Sand color palette
Everything in Desert Sand is warm and sits in the middle or dark end of the scale. Tan #C9A96E and sandy #F4A460 are the lightest, and even they carry real color, while #8B4513 and #A0522D look like baked clay and saddle leather. #D2691E adds a stronger orange. Southwestern interiors, ceramics studios, leather goods and canyon tour companies fit it well, especially in late summer and fall campaigns.
Desert Sand palette in use
Put headings and text in #8B4513 on a cream or off-white page, and use #F4A460 and #C9A96E as section backgrounds. #D2691E works as the button color, with #A0522D for hover states and borders.
This pair measures 10.32:1, so it works for body text too. The button uses #D2691E with black text.
ButtonGood for
- Southwestern home decor
- Pottery studio website
- Canyon tour brochure
- Leather goods label
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 |
|---|---|---|---|
#8B4513 | #F4A460 | 3.49:1 | AA large |
#8B4513 | #C9A96E | 3.17:1 | AA large |
Desert Sand palette as code
CSS variables
:root {
--desert-sand-1: #C9A96E;
--desert-sand-2: #A0522D;
--desert-sand-3: #8B4513;
--desert-sand-4: #D2691E;
--desert-sand-5: #F4A460;
}Tailwind v4
@theme {
--color-desert-sand-1: #C9A96E;
--color-desert-sand-2: #A0522D;
--color-desert-sand-3: #8B4513;
--color-desert-sand-4: #D2691E;
--color-desert-sand-5: #F4A460;
}Tailwind v3
// tailwind.config.js → theme.extend.colors
'desert-sand': {
100: '#C9A96E',
200: '#A0522D',
300: '#8B4513',
400: '#D2691E',
500: '#F4A460',
},SCSS
$desert-sand-1: #C9A96E;
$desert-sand-2: #A0522D;
$desert-sand-3: #8B4513;
$desert-sand-4: #D2691E;
$desert-sand-5: #F4A460;JSON
["#C9A96E","#A0522D","#8B4513","#D2691E","#F4A460"]Named colors in this palette
The nearest named color to each swatch, with its meaning and matching colors.