Palette

Desert Bloom Oasis

Captures the serene beauty of an arid landscape with hints of hidden life and ancient rock formations.

earthnatural5 colors

More earth palettes

Preview

See it in context.

Interface

New

Ready when you are.

A quick look at how Desert Bloom Oasis 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 Oasis.

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

Data visualization

#D4A66C#F4C470#A87C42#7B5731#E6E1D1

Palette guide

How to use Desert Bloom Oasis

Overview

The Desert Bloom Oasis palette captures the serene beauty of an arid landscape with hints of hidden life and ancient rock formations. This grounding collection ranges from the deep, robust #7B5731 to the very light, creamy #E6E1D1, with harmonious mid-tones such as #D4A66C, #F4C470, and the rich #A87C42. Designers can leverage this palette to create a sense of natural warmth, authenticity, and sophisticated simplicity. Developers will find these earthy hues excellent for building user interfaces that feel organic, comforting, and visually balanced, making them perfect for heritage, natural product, or eco-conscious brands.

Best used for

Natural and organic food product branding
Sustainable fashion or artisan craft websites
Coffee shop or bakery branding
Interior design (rustic, farmhouse, natural)
Wellness and mindfulness applications
Photography portfolios (natural light, earthy themes)

Suggested color roles

primary

#7B5731 - A deep, grounding chocolate brown, ideal for strong headings, primary buttons, or sophisticated brand elements, conveying stability and richness.

secondary

#A87C42 - A warm, inviting caramel brown, perfect for subheadings, navigation, or complementary graphics, adding depth.

accent

#E6E1D1 - Use this lightest creamy shade for subtle highlights, delicate text, or as a background for key information, adding brightness and airiness.

background

#F4C470 - A soft, warm, light yellow-gold background color for content areas, offering good readability for darker text.

text

A dark brown like #7B5731 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 #F4C470 and #E6E1D1 by using darker colors like #7B5731 or a deep brown.
#7B5731 offers good contrast with lighter text such as white or #E6E1D1.
Avoid placing similar mid-tones like #D4A66C and #A87C42 for text/background without careful testing.
Interactive elements should have clear focus indicators using a contrasting color from the palette.

Recommended combinations

Earth Oasis

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

#7B5731 · #E6E1D1 · #A87C42

Desert Glow

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

#F4C470 · #D4A66C · #E6E1D1

Ancient Sands

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

#A87C42 · #7B5731 · #D4A66C

CSS variables

:root {
  --desert-bloom-oasis-5-1: #D4A66C;
  --desert-bloom-oasis-5-2: #F4C470;
  --desert-bloom-oasis-5-3: #A87C42;
  --desert-bloom-oasis-5-4: #7B5731;
  --desert-bloom-oasis-5-5: #E6E1D1;
}

Tailwind config

theme: {
  extend: {
    colors: {
      "desert-bloom-oasis-5": {
        1: "#D4A66C",
        2: "#F4C470",
        3: "#A87C42",
        4: "#7B5731",
        5: "#E6E1D1",
      }
    }
  }
}

Hex values

Color 1#D4A66C

Color 2#F4C470

Color 3#A87C42

Color 4#7B5731

Color 5#E6E1D1

Accessibility

Contrast checker

1.4:1Fail

1.7:1Fail

2.9:1Fail

1.7:1Fail

1.4:1Fail

2.3:1Fail

4:1AA18

1.2:1Fail

1.7:1Fail

2.3:1Fail

1.7:1Fail

2.9:1Fail

4:1AA18

1.7:1Fail

4.9:1AA

1.7:1Fail

1.2:1Fail

2.9:1Fail

4.9:1AA

Similar palettes

More like Desert Bloom Oasis

Desert Bloom Oasis

See it in context.

Ready when you are.

Built with Desert Bloom Oasis.

How to use Desert Bloom Oasis

Overview

Best used for

Suggested color roles

Accessibility notes

Recommended combinations

Earth Oasis

Desert Glow

Ancient Sands

CSS variables

Tailwind config

Related searches

Hex values

Contrast checker

More like Desert Bloom Oasis