Palette

Desert Oasis Bloom

A splash of vivid green life amidst the golden serenity of a desert landscape.

earthnatural5 colors

More earth palettes

Preview

See it in context.

Interface

New

Ready when you are.

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

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

Data visualization

#F5DEB3#F0E68C#9ACD32#6B8E23#228B22

Palette guide

How to use Desert Oasis Bloom

Overview

The Desert Oasis Bloom palette beautifully contrasts the arid golden serenity of a desert with splashes of vivid green life. It features a soft, sandy #F5DEB3 and a brighter, more vibrant #F0E68C, evoking sun-kissed earth. These warm foundations are dramatically offset by a lively #9ACD32, a rich #6B8E23, and a deep, powerful #228B22, all representing flourishing greenery. This palette is designed to create a sense of natural vitality and hope, making it excellent for projects that need to convey freshness, growth, or a vibrant natural theme. It's particularly effective for designs that require a compelling interplay between warmth and refreshing coolness.

Best used for

Environmental and conservation organizations
Gardening and landscaping businesses
Health and wellness brands with a natural focus
Outdoor lifestyle and adventure gear
Educational content about ecosystems
Websites promoting sustainable living

Suggested color roles

primary

#9ACD32 - A vibrant, energetic green, ideal for primary calls-to-action, key brand elements, or graphical highlights to symbolize growth and freshness.

secondary

#6B8E23 - A deeper, more grounded green, excellent for supporting headings, sub-sections, or secondary branding, providing natural depth.

accent

#F0E68C - This bright, sunny yellow acts as a striking accent for interactive states, small details, or to draw attention against the greens.

background

#F5DEB3 - A soft, warm sandy beige that provides a gentle, inviting backdrop for content, ensuring legibility and a natural feel.

text

#228B22 - The darkest green, recommended for body text and essential UI elements, offering strong readability against lighter palette colors or white.

Accessibility notes

Ensure sufficient contrast between #F0E68C (yellow) and #228B22 (dark green) for any text usage.
The light #F5DEB3 background provides good contrast for text in #228B22 or black.
Avoid using #9ACD32 or #6B8E23 for text on #F5DEB3 or #F0E68C without careful contrast checking; they may not pass WCAG AA.
For critical content, use #228B22 or a dark charcoal against the lightest background colors in the palette.

Recommended combinations

Vibrant Growth

Dynamic layouts combining a warm base with energetic greens, perfect for environmental themes.

#F5DEB3 · #9ACD32 · #228B22

Sunlit Greens

Highlighting freshness and vitality, ideal for product features or vibrant digital content.

#F0E68C · #6B8E23 · #9ACD32

Desert Contrast

A balanced composition for storytelling, showcasing natural elements with a touch of warmth.

#F5DEB3 · #6B8E23 · #F0E68C

CSS variables

:root {
  --desert-oasis-bloom-1: #F5DEB3;
  --desert-oasis-bloom-2: #F0E68C;
  --desert-oasis-bloom-3: #9ACD32;
  --desert-oasis-bloom-4: #6B8E23;
  --desert-oasis-bloom-5: #228B22;
}

Tailwind config

theme: {
  extend: {
    colors: {
      "desert-oasis-bloom": {
        1: "#F5DEB3",
        2: "#F0E68C",
        3: "#9ACD32",
        4: "#6B8E23",
        5: "#228B22",
      }
    }
  }
}

Hex values

Color 1#F5DEB3

Color 2#F0E68C

Color 3#9ACD32

Color 4#6B8E23

Color 5#228B22

Accessibility

Contrast checker

1:1Fail

1.4:1Fail

2.9:1Fail

3.3:1AA18

1:1Fail

1.5:1Fail

3:1Fail

3.4:1AA18

1.4:1Fail

1.5:1Fail

2:1Fail

2.3:1Fail

2.9:1Fail

3:1Fail

2:1Fail

1.2:1Fail

3.3:1AA18

3.4:1AA18

2.3:1Fail

1.2:1Fail

Similar palettes

More like Desert Oasis Bloom

Rainforest Canopy Light