Desert Color Palette
Pulled from a photo of a desert canyon: sandstone, red rock and clay against a clear blue sky. Warm earth and cool blue in one palette.
Click any color to copy its HEX code.
Desert color codes
| Name | HEX | RGB | HSL | |
|---|---|---|---|---|
| Sandstone | #C7A89A | 199, 168, 154 | 19°, 29%, 69% | |
| Desert Sky | #8DBCD5 | 141, 188, 213 | 201°, 46%, 69% | |
| Canyon Clay | #A07B68 | 160, 123, 104 | 20°, 23%, 52% | |
| Deep Sky | #4B91B3 | 75, 145, 179 | 200°, 41%, 50% | |
| Red Rock | #755747 | 117, 87, 71 | 21°, 24%, 37% | |
| Mesa Shadow | #4C372C | 76, 55, 44 | 21°, 27%, 24% |
How to use this palette
A simple way to use 6 colors without chaos is the 60-30-10 rule: about 60% of the space in the lightest shade, 30% in a supporting color and 10% in the accent. For this palette that is Desert Sky (#8DBCD5) as the base, Sandstone (#C7A89A) as the supporting color and Deep Sky (#4B91B3) as the accent, with Mesa Shadow (#4C372C) for text and fine details.
Desert
A quick preview of the palette with base, text and accent colors.
Deep Sky SandstoneWhere it works
Readable text color pairs
These combinations reach a contrast ratio of at least 4.5:1, the WCAG AA level for normal text, so they are safe for text on websites, posters and invitations.
- Mesa Shadow on Desert Sky#4C372C on #8DBCD5 · 5.4:1
- Mesa Shadow on Sandstone#4C372C on #C7A89A · 5.0:1
CSS variables
:root {
--sandstone: #C7A89A;
--desert-sky: #8DBCD5;
--canyon-clay: #A07B68;
--deep-sky: #4B91B3;
--red-rock: #755747;
--mesa-shadow: #4C372C;
}The photo behind the palette
