Palette

Desert Bloom Oasis

A palette inspired by a rare desert bloom, combining arid warmth with a surprising touch of vibrant green.

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

#E9C46A#F4A261#E76F51#2A9D8F#264653

Palette guide

How to use Desert Bloom Oasis

Overview

The Desert Bloom Oasis palette masterfully blends arid warmth with refreshing coolness, evoking a rare desert bloom. Golden #E9C46A and vibrant #F4A261, along with the striking #E76F51, represent the sun-drenched landscape and fiery blossoms. A surprising contrast comes from the cool, deep #2A9D8F and the grounding #264653, symbolizing precious water and shadow. This palette is highly versatile for designers and developers looking to convey natural dynamism, sophistication, and an eco-conscious message, balancing energetic warmth with serene, stable blues and greens.

Best used for

Eco-conscious brand identity
Travel and adventure website interfaces
Modern rustic interior design
Sustainable product packaging
Educational content on ecosystems
Dynamic digital illustrations

Suggested color roles

primary

Establish #264653 as the main grounding color for strong headers, primary navigation, or substantial background elements, offering stability and depth.

secondary

Use #E9C46A for softer backgrounds, subheadings, or as a warm, inviting base for content, providing contrast to the darker primary.

accent

Deploy #E76F51 for high-visibility calls to action, key interactive elements, or small, impactful graphical details to draw immediate attention.

background

Opt for #F4A261 for a warm, engaging background, or #E9C46A for a lighter, more subtle base that still conveys warmth.

text

Apply #264653 for all main body text on lighter backgrounds like #E9C46A or #F4A261 to ensure excellent legibility and a professional finish.

Accessibility notes

Ensure #E76F51 has sufficient contrast when used for text or interactive elements, especially against lighter backgrounds.
Text in #264653 on #E9C46A or #F4A261 provides excellent readability.
Be cautious when pairing #2A9D8F with other mid-tones; always check contrast for readability.
For interactive elements, maintain a high contrast ratio between the element and its surrounding content for clear user experience.

Recommended combinations

Warm Desert

Creates a sunny, energetic feel, perfect for highlighting promotions or engaging visual content.

#E9C46A · #F4A261 · #E76F51

Oasis Contrast

Offers a modern, refreshing look, ideal for balancing warm and cool elements in UI design.

#264653 · #2A9D8F · #F4A261

Rustic Bloom

Provides a grounded yet vibrant aesthetic, suitable for headers, footers, or distinct content sections.

#E9C46A · #E76F51 · #264653

CSS variables

:root {
  --desert-bloom-oasis-1: #E9C46A;
  --desert-bloom-oasis-2: #F4A261;
  --desert-bloom-oasis-3: #E76F51;
  --desert-bloom-oasis-4: #2A9D8F;
  --desert-bloom-oasis-5: #264653;
}

Tailwind config

theme: {
  extend: {
    colors: {
      "desert-bloom-oasis": {
        1: "#E9C46A",
        2: "#F4A261",
        3: "#E76F51",
        4: "#2A9D8F",
        5: "#264653",
      }
    }
  }
}

Hex values

Color 1#E9C46A

Color 2#F4A261

Color 3#E76F51

Color 4#2A9D8F

Color 5#264653

Accessibility

Contrast checker

1.2:1Fail

1.9:1Fail

2:1Fail

6:1AA

1.2:1Fail

1.5:1Fail

1.6:1Fail

4.9:1AA

1.9:1Fail

1.5:1Fail

1.1:1Fail

3.3:1AA18

2:1Fail

1.6:1Fail

1.1:1Fail

3:1AA18

6:1AA

4.9:1AA

3.3:1AA18

3:1AA18

Similar palettes

More like Desert Bloom Oasis