Palette

Cactus Bloom Desert

Evokes the quiet resilience of desert flora with dusty greens and a surprising vibrant flower accent.

earthnatural5 colors

More earth palettes

Preview

See it in context.

Interface

New

Ready when you are.

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

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

Data visualization

#5D5A3F#A49F61#C7C293#E0DFBA#E87A5B

Palette guide

How to use Cactus Bloom Desert

Overview

The Cactus Bloom Desert palette captures the quiet resilience of arid landscapes, combining dusty greens with a surprising vibrant bloom. This natural color scheme features a deep, grounding green, #5D5A3F, alongside softer, muted greens like #A49F61 and #C7C293, reminiscent of dry desert foliage. A very light, almost bone-white hue, #E0DFBA, provides a serene backdrop, while a striking terracotta, #E87A5B, adds a vital burst of warmth. Designers can use this palette to evoke a sense of calm strength and natural beauty. For developers, these colors offer a harmonious set for creating engaging, earthy interfaces that feel both rugged and inviting, perfect for nature-focused applications or lifestyle brands.

Best used for

Eco-friendly product branding
Outdoor adventure websites
Southwestern-themed interiors
Natural skincare packaging
Garden and landscape design resources
Artisan craft marketplaces

Suggested color roles

primary

Utilize #C7C293 as a soft, adaptable base color for large sections, providing a light, sandy feel.

secondary

Apply #A49F61 for supporting elements, adding a subtle green depth that complements the primary.

accent

Introduce #E87A5B as a vibrant, eye-catching accent for calls to action, icons, or important highlights, mimicking a desert flower.

background

Employ #E0DFBA for clean, minimalist backgrounds, offering excellent contrast for darker text and elements.

text

Use #5D5A3F for main body text and headings, ensuring strong readability against lighter backgrounds with its deep, earthy tone.

Accessibility notes

Ensure sufficient contrast when pairing #5D5A3F with #E0DFBA or #C7C293 for body text to meet WCAG standards.
The vibrant #E87A5B should be used with caution for text; ensure it has enough contrast against its background.
Use #A49F61 as a secondary text color only on very light backgrounds like #E0DFBA for better readability.
Provide alternative text for any color-dependent information, especially for users with color vision deficiencies.

Recommended combinations

Desert Bloom

Highlights the vibrant accent against a backdrop of muted green and light beige, perfect for hero sections or focal points.

#E87A5B · #A49F61 · #E0DFBA

Earthy Foundation

Creates a stable, grounded feel with a deep green for text or elements on a lighter, natural base.

#C7C293 · #5D5A3F · #A49F61

Subtle Greens

Offers a gentle, harmonious blend of light, dusty greens, ideal for subtle gradients or layered backgrounds.

#E0DFBA · #C7C293 · #A49F61

CSS variables

:root {
  --cactus-bloom-desert-2-1: #5D5A3F;
  --cactus-bloom-desert-2-2: #A49F61;
  --cactus-bloom-desert-2-3: #C7C293;
  --cactus-bloom-desert-2-4: #E0DFBA;
  --cactus-bloom-desert-2-5: #E87A5B;
}

Tailwind config

theme: {
  extend: {
    colors: {
      "cactus-bloom-desert-2": {
        1: "#5D5A3F",
        2: "#A49F61",
        3: "#C7C293",
        4: "#E0DFBA",
        5: "#E87A5B",
      }
    }
  }
}

Hex values

Color 1#5D5A3F

Color 2#A49F61

Color 3#C7C293

Color 4#E0DFBA

Color 5#E87A5B

Accessibility

Contrast checker

2.6:1Fail

3.9:1AA18

5.1:1AA

2.5:1Fail

2.6:1Fail

1.5:1Fail

2:1Fail

1:1Fail

3.9:1AA18

1.5:1Fail

1.3:1Fail

1.6:1Fail

5.1:1AA

2:1Fail

1.3:1Fail

2.1:1Fail

2.5:1Fail

1:1Fail

1.6:1Fail

2.1:1Fail

Similar palettes

More like Cactus Bloom Desert