Back to palettes

Palette

Desert Succulent Green

Cool, resilient greens of desert succulents, thriving amidst 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 Green 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 Green.

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

Data visualization

#E0EAD9#C1D8BC#A0C49B#7FAD7B#62995D

Palette guide

How to use Desert Succulent Green

Overview

The Desert Succulent Green (version 2) palette showcases a serene progression of cool, resilient greens, inspired by succulents thriving in arid landscapes. It ranges from the very light #E0EAD9 to the deep #62995D, with intermediate shades like #C1D8BC, #A0C49B, and #7FAD7B. This palette is exceptionally useful for designers and developers aiming to create calm, fresh, and organic digital experiences. It evokes growth, natural resilience, and tranquility, making it ideal for brands focused on sustainability, health, or any project requiring a harmonious, green-centric aesthetic. Its monochromatic-like quality lends itself to clean, elegant designs.

Best used for

  • Eco-friendly product branding
  • Health and wellness apps
  • Botanical garden websites
  • Minimalist design projects
  • Sustainable lifestyle blogs
  • Serene corporate branding

Suggested color roles

primary

Utilize #7FAD7B as a balanced primary green for headings, navigation, or key brand elements.

secondary

Employ #A0C49B for secondary content blocks, backgrounds, or to add a gentle green tone.

accent

Apply #62995D for strong accents, important icons, or to provide grounding contrast in design details.

background

Use #E0EAD9 as a crisp, clean background color, offering excellent readability for dark text.

text

Choose #62995D for body text and headings on lighter backgrounds like #E0EAD9 to ensure optimal readability.

Accessibility notes

  • Ensure high contrast between #E0EAD9 and dark text colors like #62995D for all content.
  • Be cautious when using #C1D8BC for small text on light backgrounds, as its lightness may not meet WCAG AA contrast standards.
  • Test interactive elements in #7FAD7B to confirm clear visual feedback against other palette colors.
  • Always verify WCAG AA contrast standards, especially for critical information against lighter shades.

Recommended combinations

Green Gradient

Create a smooth, natural transition for backgrounds or content blocks, moving from light to deep green.

#E0EAD9 · #A0C49B · #62995D

Fresh Accents

Ideal for UI elements or illustrations, combining mid-tone greens with a deeper accent for contrast.

#C1D8BC · #7FAD7B · #62995D

Light & Deep

Use for clear, readable layouts where a light background is contrasted with distinct mid and dark greens.

#E0EAD9 · #7FAD7B · #62995D

CSS variables

:root {
  --desert-succulent-green-2-1: #E0EAD9;
  --desert-succulent-green-2-2: #C1D8BC;
  --desert-succulent-green-2-3: #A0C49B;
  --desert-succulent-green-2-4: #7FAD7B;
  --desert-succulent-green-2-5: #62995D;
}

Tailwind config

theme: {
  extend: {
    colors: {
      "desert-succulent-green-2": {
        1: "#E0EAD9",
        2: "#C1D8BC",
        3: "#A0C49B",
        4: "#7FAD7B",
        5: "#62995D",
      }
    }
  }
}

Related searches

succulent green color palettedesert green huesmonochromatic green schemenatural botanical greencalm green design colors

Palette colors

Hex values

Color 1#E0EAD9
·
Color 2#C1D8BC
·
Color 3#A0C49B
·
Color 4#7FAD7B
·
Color 5#62995D
·

Accessibility

Contrast checker

1
2
3
4
5
1
1.2:1Fail
1.6:1Fail
2.1:1Fail
2.7:1Fail
2
1.2:1Fail
1.3:1Fail
1.7:1Fail
2.2:1Fail
3
1.6:1Fail
1.3:1Fail
1.3:1Fail
1.7:1Fail
4
2.1:1Fail
1.7:1Fail
1.3:1Fail
1.3:1Fail
5
2.7:1Fail
2.2:1Fail
1.7:1Fail
1.3:1Fail

Similar palettes

More like Desert Succulent Green

View all earth