Back to palettes

Palette

Succulent Garden Hues

A delicate collection of muted greens, capturing the subtle resilience and quiet beauty of a succulent garden.

earthnatural5 colors
More earth palettes

Preview

See it in context.

Interface

New

Ready when you are.

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

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

Data visualization

#4C6F5A#759B87#A0C8B1#C7E0CE#3A5F48

Palette guide

How to use Succulent Garden Hues

Overview

The Succulent Garden Hues palette offers a delicate and serene collection of muted greens, capturing the subtle resilience and quiet beauty of a succulent garden. This monochromatic-leaning palette, featuring shades from the deep #3A5F48 to the airy #C7E0CE, provides a naturally cohesive and calming aesthetic. Designers can use this range of greens, including #4C6F5A and #A0C8B1, to create sophisticated and tranquil designs. Developers will find its inherent harmony excellent for building user interfaces that exude natural elegance and focus, making it ideal for brands prioritizing sustainability, wellness, or a minimalist aesthetic. This palette provides a comforting visual experience.

Best used for

  • Eco-conscious brand identity and packaging
  • Nature-themed mobile applications and websites
  • Wellness and mindfulness content platforms
  • Minimalist interior design concepts
  • Sustainable product marketing materials
  • Botanical art and illustration

Suggested color roles

primary

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

secondary

#4C6F5A provides a rich, mid-tone green, perfect for secondary headings, content sections, or prominent UI components.

accent

#C7E0CE offers the lightest, most delicate touch, ideal for subtle highlights, background textures, or soft dividing lines.

background

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

text

#3A5F48 or a deep charcoal offers excellent readability on lighter backgrounds. For secondary text, #4C6F5A works well on #C7E0CE.

Accessibility notes

  • Ensure sufficient contrast between text and background, especially when using lighter greens like #A0C8B1 for text on #C7E0CE.
  • Prioritize #3A5F48 for main body text on light backgrounds to meet WCAG contrast requirements.
  • Avoid pairing #C7E0CE with #A0C8B1 for small text as their contrast may be insufficient.
  • For interactive elements, use #3A5F48 or #4C6F5A to provide clear visual affordance.

Recommended combinations

Deep Forest

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

#3A5F48 · #4C6F5A · #759B87

Serene Canopy

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

#A0C8B1 · #C7E0CE · #759B87

Elegance Contrast

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

#3A5F48 · #C7E0CE · #A0C8B1

CSS variables

:root {
  --succulent-garden-hues-3-1: #4C6F5A;
  --succulent-garden-hues-3-2: #759B87;
  --succulent-garden-hues-3-3: #A0C8B1;
  --succulent-garden-hues-3-4: #C7E0CE;
  --succulent-garden-hues-3-5: #3A5F48;
}

Tailwind config

theme: {
  extend: {
    colors: {
      "succulent-garden-hues-3": {
        1: "#4C6F5A",
        2: "#759B87",
        3: "#A0C8B1",
        4: "#C7E0CE",
        5: "#3A5F48",
      }
    }
  }
}

Related searches

muted green color schemeserene succulent palettenatural green designcalm earth tonesmonochromatic green branding

Palette colors

Hex values

Color 1#4C6F5A
·
Color 2#759B87
·
Color 3#A0C8B1
·
Color 4#C7E0CE
·
Color 5#3A5F48
·

Accessibility

Contrast checker

1
2
3
4
5
1
1.8:1Fail
3.1:1AA18
4:1AA18
1.3:1Fail
2
1.8:1Fail
1.7:1Fail
2.2:1Fail
2.3:1Fail
3
3.1:1AA18
1.7:1Fail
1.3:1Fail
3.9:1AA18
4
4:1AA18
2.2:1Fail
1.3:1Fail
5.1:1AA
5
1.3:1Fail
2.3:1Fail
3.9:1AA18
5.1:1AA

Similar palettes

More like Succulent Garden Hues

View all earth
Desert Succulent Array
Succulent Garden Hues
Tranquil Bamboo Grove
Bamboo Serene Path
Coastal Dune Breeze
Coastal Dune Grass