Palette

Desert Succulent Garden

Subtle greens and muted grays capture the resilient beauty of succulents thriving in arid landscapes.

earthminimal5 colors

More earth palettes

Preview

See it in context.

Interface

New

Ready when you are.

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

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

Data visualization

#3A4D3B#5A7B5F#8AC29B#BFE8C9#DFF2E2

Palette guide

How to use Desert Succulent Garden

Overview

The Desert Succulent Garden palette captures the resilient beauty of succulents with a range of subtle, refreshing greens. Anchored by the deep, grounding #3A4D3B, it transitions through vibrant #5A7B5F and #8AC29B, to the airy #BFE8C9 and #DFF2E2. This palette is exceptionally useful for designers and developers aiming to create clean, natural, and minimalist digital experiences. It evokes growth, freshness, and organic simplicity, making it ideal for brands focused on sustainability, health, or modern, nature-inspired aesthetics. Its harmonious progression of green tones allows for versatile application in various design contexts.

Best used for

Sustainable brand identity
Health and wellness applications
Botanical-themed websites
Minimalist graphic design
Eco-friendly product packaging
Clean user interface designs

Suggested color roles

primary

Utilize #3A4D3B as a strong, grounding primary color for headers, navigation, or impactful brand elements.

secondary

Employ #5A7B5F for secondary content blocks, buttons, or to add a natural depth to UI components.

accent

Apply #8AC29B for vibrant accents, call-to-action buttons, or to highlight key information.

background

Use #DFF2E2 as a crisp, clean background color, providing excellent readability for dark text.

text

Choose #3A4D3B for body text and headings on lighter backgrounds like #DFF2E2 to ensure optimal readability.

Accessibility notes

Ensure high contrast between #DFF2E2 and dark text colors like #3A4D3B for all content.
Be cautious when using #BFE8C9 for small text on light backgrounds, as its lightness may not meet WCAG AA contrast standards.
Test interactive elements in #5A7B5F to confirm clear visual feedback against other palette colors.
Always verify WCAG AA contrast standards, especially for critical information against lighter shades.

Recommended combinations

Garden Fresh

Create a vibrant yet grounded look for hero sections or feature blocks, with a light base and strong green accents.

#DFF2E2 · #8AC29B · #3A4D3B

Subtle Growth

Ideal for backgrounds and secondary content, offering a harmonious progression of mid-tone greens.

#BFE8C9 · #5A7B5F · #8AC29B

Deep Rooted

Use for strong branding or prominent elements, combining the darkest green with a mid-tone and a crisp light accent.

#3A4D3B · #5A7B5F · #DFF2E2

CSS variables

:root {
  --desert-succulent-garden-1: #3A4D3B;
  --desert-succulent-garden-2: #5A7B5F;
  --desert-succulent-garden-3: #8AC29B;
  --desert-succulent-garden-4: #BFE8C9;
  --desert-succulent-garden-5: #DFF2E2;
}

Tailwind config

theme: {
  extend: {
    colors: {
      "desert-succulent-garden": {
        1: "#3A4D3B",
        2: "#5A7B5F",
        3: "#8AC29B",
        4: "#BFE8C9",
        5: "#DFF2E2",
      }
    }
  }
}

Hex values

Color 1#3A4D3B

Color 2#5A7B5F

Color 3#8AC29B

Color 4#BFE8C9

Color 5#DFF2E2

Accessibility

Contrast checker

1.9:1Fail

4.5:1AA18

6.8:1AA

7.8:1AAA

1.9:1Fail

2.3:1Fail

3.5:1AA18

4:1AA18

4.5:1AA18

2.3:1Fail

1.5:1Fail

1.7:1Fail

6.8:1AA

3.5:1AA18

1.5:1Fail

1.1:1Fail

7.8:1AAA

4:1AA18

1.7:1Fail

1.1:1Fail

Similar palettes

More like Desert Succulent Garden

View all earth

Desert Cairn Stack

Desert Dune Silhouette

Desert Sands Dune

Gentle Bamboo Grove

Bamboo Grove Zen

Earthen Pottery Glaze