Palette

Desert Succulent Bloom

A harmonious blend of muted greens and soft terra cotta, inspired by resilient succulents thriving in arid landscapes.

earthnatural5 colors

More earth palettes

Preview

See it in context.

Interface

New

Ready when you are.

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

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

Data visualization

#93AB88#C7D9B7#DDEACC#AF7B6C#8C5F57

Palette guide

How to use Desert Succulent Bloom

Overview

The Desert Succulent Bloom palette offers a harmonious blend of muted greens and soft terra cotta, perfect for creating natural and serene digital or physical spaces. Inspired by resilient succulents, this palette features a calming mid-green, #93AB88, complemented by the inviting warmth of terra cotta, #AF7B6C. The lightest shade, #DDEACC, provides an excellent airy base, while #8C5F57 adds depth. Designers and developers can leverage these earthy tones to evoke a sense of tranquility, sustainability, and understated elegance in branding, web design, or editorial content. It’s ideal for projects aiming for an organic, grounded aesthetic.

Best used for

Eco-conscious brand identity
Spa and wellness website design
Botanical illustration and art
Natural product packaging
Interior design mood boards
Relaxed and earthy UI themes

Suggested color roles

primary

Use #93AB88 as a foundational, calming green for main sections, headers, or large graphical elements.

secondary

Apply #AF7B6C for inviting call-to-action buttons, decorative accents, or secondary content blocks to add warmth.

accent

Employ #8C5F57 for subtle highlights, important icons, or to provide grounding contrast in smaller details.

background

Utilize #DDEACC as a light, airy background color, offering excellent readability for dark text.

text

Choose #8C5F57 for body text and headings to ensure good readability against lighter backgrounds like #DDEACC, or use a dark charcoal for maximum contrast.

Accessibility notes

Ensure sufficient contrast between #DDEACC and darker text colors like #8C5F57 for readability.
Avoid using mid-tone colors like #93AB88 or #C7D9B7 for small text sizes to maintain legibility.
Test interactive elements for clear focus states using #AF7B6C against #DDEACC.
For larger text, #AF7B6C on #DDEACC may be acceptable, but always verify WCAG AA contrast standards.

Recommended combinations

Earthy Harmony

Create a balanced, natural feel for content blocks or hero sections with a soft green base and warm accents.

#C7D9B7 · #93AB88 · #AF7B6C

Warm Desert

Ideal for cozy, inviting interfaces or product displays, featuring a light background with rich, warm brown details.

#DDEACC · #AF7B6C · #8C5F57

Subtle Bloom

Use for sophisticated, understated designs where a muted green is accented by a deeper, grounding brown.

#C7D9B7 · #8C5F57 · #93AB88

CSS variables

:root {
  --desert-succulent-bloom-1: #93AB88;
  --desert-succulent-bloom-2: #C7D9B7;
  --desert-succulent-bloom-3: #DDEACC;
  --desert-succulent-bloom-4: #AF7B6C;
  --desert-succulent-bloom-5: #8C5F57;
}

Tailwind config

theme: {
  extend: {
    colors: {
      "desert-succulent-bloom": {
        1: "#93AB88",
        2: "#C7D9B7",
        3: "#DDEACC",
        4: "#AF7B6C",
        5: "#8C5F57",
      }
    }
  }
}

Hex values

Color 1#93AB88

Color 2#C7D9B7

Color 3#DDEACC

Color 4#AF7B6C

Color 5#8C5F57

Accessibility

Contrast checker

1.7:1Fail

2:1Fail

1.4:1Fail

2.2:1Fail

1.7:1Fail

1.2:1Fail

2.4:1Fail

3.6:1AA18

2:1Fail

1.2:1Fail

2.8:1Fail

4.3:1AA18

1.4:1Fail

2.4:1Fail

2.8:1Fail

1.5:1Fail

2.2:1Fail

3.6:1AA18

4.3:1AA18

1.5:1Fail

Similar palettes

More like Desert Succulent Bloom

View all earth

Desert Agave Bloom

Desert Bloom Oasis

Desert Bloom Whispers

Agave Bloom Dawn

Agave Spire Dawn

Arid Bloom Whispers