Palette

Succulent Plant Blend

Muted greens and soft earthy tones, inspired by the resilient beauty of desert succulents.

Earthnatural5 colors

More Earth palettes

Preview

See it in context.

Interface

New

Ready when you are.

A quick look at how Succulent Plant Blend 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 Succulent Plant Blend.

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

Data visualization

#728F79#A6B48D#D0D8BF#4E6554#8F9B77

Palette guide

How to use Succulent Plant Blend

Overview

The Succulent Plant Blend palette offers a rich array of muted greens and soft earthy tones, inspired by the resilient beauty of desert succulents. With grounding colors like the deep #4E6554 and the creamy #D0D8BF, alongside the versatile #728F79, this palette is ideal for creating designs that feel organic, natural, and subtly sophisticated. Designers will appreciate its ability to convey a sense of calm and resilience, while developers can utilize its harmonious range for building user interfaces that are both inviting and functional. The inclusion of #A6B48D and #8F9B77 ensures a cohesive blend, perfect for brands focused on natural products, wellness, or botanical aesthetics.

Best used for

Organic skincare and beauty product packaging
Artisanal craft and handmade goods branding
Botanical illustration and nature-inspired design
Garden center or plant nursery websites
Natural wellness and holistic health content
Earthy, minimalist interior design concepts

Suggested color roles

primary

#4E6554 serves as the deepest, most grounding green, excellent for foundational elements, strong headlines, or brand logos.

secondary

#728F79 provides a soft, mid-tone green, perfect for secondary headings, content sections, or prominent UI components.

accent

#D0D8BF offers the lightest, most delicate creamy green, ideal for subtle highlights, background textures, or a light accent.

background

Use #A6B48D for a soft, inviting background, or #D0D8BF for a very light, airy canvas that allows darker elements to stand out.

text

#4E6554 or a dark charcoal provides excellent readability on lighter backgrounds. For secondary text, #728F79 works well on #D0D8BF.

Accessibility notes

Ensure sufficient contrast between text and background, especially when using lighter greens like #A6B48D for text on #D0D8BF.
Prioritize #4E6554 for main body text on light backgrounds to meet WCAG contrast requirements.
Avoid pairing #D0D8BF with #A6B48D for small text as their contrast may be insufficient.
For interactive elements, use #4E6554 or #728F79 to provide clear visual affordance and feedback.

Recommended combinations

Deep Earth

Creates a rich, layered green look, suitable for deep backgrounds with subtle, harmonious content and clear hierarchy.

#4E6554 · #728F79 · #A6B48D

Soft Bloom

Ideal for soft, airy designs, providing a gentle transition for backgrounds or large content blocks, evoking natural textures.

#D0D8BF · #A6B48D · #8F9B77

Resilient Contrast

Offers a strong, elegant contrast for headlines and body text against a very light background, with a mid-tone for details.

#4E6554 · #D0D8BF · #728F79

CSS variables

:root {
  --succulent-plant-blend-1: #728F79;
  --succulent-plant-blend-2: #A6B48D;
  --succulent-plant-blend-3: #D0D8BF;
  --succulent-plant-blend-4: #4E6554;
  --succulent-plant-blend-5: #8F9B77;
}

Tailwind config

theme: {
  extend: {
    colors: {
      "succulent-plant-blend": {
        1: "#728F79",
        2: "#A6B48D",
        3: "#D0D8BF",
        4: "#4E6554",
        5: "#8F9B77",
      }
    }
  }
}

Hex values

Color 1#728F79

Color 2#A6B48D

Color 3#D0D8BF

Color 4#4E6554

Color 5#8F9B77

Accessibility

Contrast checker

1.6:1Fail

2.4:1Fail

1.8:1Fail

1.2:1Fail

1.6:1Fail

1.5:1Fail

2.9:1Fail

1.3:1Fail