Palette

Desert Bloom

Warm, sun-baked tones of sand and terracotta, accented by the subtle hues of desert flora.

warmnatural5 colors

More warm palettes

Preview

See it in context.

Interface

New

Ready when you are.

A quick look at how Desert Bloom reads on buttons, badges, and alerts before you commit.

This alert border and accent use the palette's detail color.

Marketing banner

Launch

Built with Desert Bloom.

A bolder treatment that stretches the primary and secondary colors across a full gradient banner.

Data visualization

#EAB86D#F0D78D#D4AC60#A97F3E#D59C5C

Palette guide

How to use Desert Bloom

Overview

The Desert Bloom palette showcases warm, sun-baked tones of sand and terracotta, subtly accented by the hues of resilient desert flora. This inviting collection ranges from the light, airy #F0D78D to the deeper, grounding #A97F3E, with harmonious mid-tones such as #EAB86D, #D4AC60, and #D59C5C. Designers can leverage this palette to create a sense of natural warmth, rustic charm, and understated elegance. Developers will find these earthy hues excellent for building user interfaces that feel organic, comforting, and visually balanced, making them perfect for lifestyle or eco-conscious brands.

Best used for

Natural or organic food product branding
Artisan craft and handmade goods websites
Southwestern-inspired home decor
Skincare or beauty brands emphasizing natural ingredients
Lifestyle blogs focusing on sustainable living
Photography portfolios (desert, nature, rustic themes)

Suggested color roles

primary

#A97F3E - A deep, rich brown-gold, ideal for strong headings, primary buttons, or sophisticated brand elements, conveying authenticity.

secondary

#D4AC60 - A warm, inviting sandy tone perfect for subheadings, navigation, or complementary graphics, adding a touch of desert sun.

accent

#F0D78D - Use this lightest shade for subtle highlights, delicate text, or as a very light background for key information, adding brightness.

background

#EAB86D - A soft, warm background color for content areas, offering good readability for darker text.

text

A dark brown like #A97F3E or a deep charcoal for main body text against lighter backgrounds. White or a very light cream works well against the darkest browns.

Accessibility notes

Ensure sufficient contrast for text on #EAB86D and #F0D78D by using darker colors like #A97F3E or a dark brown.
#A97F3E offers good contrast with lighter text such as white or #F0D78D.
Avoid placing similar mid-tones like #EAB86D and #D59C5C for text/background without careful testing.
Interactive elements should have clear focus indicators using a contrasting color from the palette.

Recommended combinations

Sun-Baked Earth

A strong, natural combination suitable for branding that emphasizes organic quality and warmth.

#A97F3E · #F0D78D · #D4AC60

Desert Sands

Creates a soft, harmonious feel, ideal for wellness apps or gentle lifestyle content.

#EAB86D · #D59C5C · #F0D78D

Terra Bloom

Provides a balanced, grounding look for educational materials or nature-themed websites.

#D4AC60 · #A97F3E · #EAB86D

CSS variables

:root {
  --desert-bloom-2-1: #EAB86D;
  --desert-bloom-2-2: #F0D78D;
  --desert-bloom-2-3: #D4AC60;
  --desert-bloom-2-4: #A97F3E;
  --desert-bloom-2-5: #D59C5C;
}

Tailwind config

theme: {
  extend: {
    colors: {
      "desert-bloom-2": {
        1: "#EAB86D",
        2: "#F0D78D",
        3: "#D4AC60",
        4: "#A97F3E",
        5: "#D59C5C",
      }
    }
  }
}

Hex values

Color 1#EAB86D

Color 2#F0D78D

Color 3#D4AC60

Color 4#A97F3E

Color 5#D59C5C

Accessibility

Contrast checker

1.3:1Fail

1.2:1Fail

2:1Fail

1.3:1Fail

1.5:1Fail

2.6:1Fail

1.7:1Fail

1.2:1Fail

1.5:1Fail

1.7:1Fail

1.1:1Fail

2:1Fail

2.6:1Fail

1.7:1Fail

1.5:1Fail

1.3:1Fail

1.7:1Fail

1.1:1Fail

1.5:1Fail

Similar palettes

More like Desert Bloom

Desert Bloom

See it in context.

Ready when you are.

Built with Desert Bloom.

How to use Desert Bloom

Overview

Best used for

Suggested color roles

Accessibility notes

Recommended combinations

Sun-Baked Earth

Desert Sands

Terra Bloom

CSS variables

Tailwind config

Related searches

Hex values

Contrast checker

More like Desert Bloom