Desert Palette

CSS variables

:root {
  --color-1: #EDC9AF;
  --color-2: #E0A96D;
  --color-3: #C19A6B;
  --color-4: #8B5A2B;
  --color-5: #5E3719;
}

Tailwind config

// tailwind.config.js
colors: {
  "desert-1": "#EDC9AF",
  "desert-2": "#E0A96D",
  "desert-3": "#C19A6B",
  "desert-4": "#8B5A2B",
  "desert-5": "#5E3719",
}

About this palette

The Desert palette is a curated set of 5 colors with their HEX, RGB and ready CSS-variable and Tailwind exports. Click any swatch for that color's full breakdown — conversions, contrast and harmonies.

Readable text on each color

White and near-black measured against every swatch. AA means the pairing clears 4.5:1 for body text; Large means it only clears 3:1, so reserve it for 24px and up.

#EDC9AFNear-black12.21:1AA

#E0A96DNear-black9.06:1AA

#C19A6BNear-black7.29:1AA

#8B5A2BWhite5.84:1AA

#5E3719White10.31:1AA

These colours on each other

4 of the 20 combinations inside this palette clear 4.5:1 for body text. Rows are the text colour, columns the background.

text \\ background	#EDC9AF	#E0A96D	#C19A6B	#8B5A2B	#5E3719
#EDC9AF	·	1.35Fails	1.68Fails	3.78Large only	6.67AA
#E0A96D	1.35Fails	·	1.24Fails	2.80Fails	4.94AA
#C19A6B	1.68Fails	1.24Fails	·	2.25Fails	3.98Large only
#8B5A2B	3.78Large only	2.80Fails	2.25Fails	·	1.77Fails
#5E3719	6.67AA	4.94AA	3.98Large only	1.77Fails	·

More palettes

Gradients in the same range

Sand Dune Peach Blush

Desert Palette

Related

Gradients in the same range