Back to palettes

Palette

Lush Succulent Garden

Fresh, vibrant greens and earthy tones, reflecting the diverse and hardy beauty of a lush succulent garden.

earthnatural5 colors
More earth palettes

Preview

See it in context.

Interface

New

Ready when you are.

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

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

Data visualization

#3A5F45#6B8E23#9ACD32#B0E065#7FFF00

Palette guide

How to use Lush Succulent Garden

Overview

The Lush Succulent Garden palette is a robust collection of earthy and vibrant greens, reflecting the resilient beauty of succulents. Key shades include the deep, grounding #3A5F45 (Dark Olive Green), the rich #6B8E23 (Olive Drab), and the lively #9ACD32 (Yellow Green). Brighter tones like #B0E065 (Light Green) and the energetic #7FFF00 (Chartreuse) add a fresh, thriving quality. This palette is excellent for designers and developers crafting projects that require a natural, organic, and slightly rugged aesthetic, conveying growth, sustainability, and a connection to the earth.

Best used for

  • Botanical and gardening brands
  • Sustainable and organic product packaging
  • Outdoor and nature-themed apps
  • Eco-conscious lifestyle blogs
  • Wellness and health industry design
  • Farm-to-table restaurant branding

Suggested color roles

primary

Utilize #3A5F45 as a strong, foundational color for headers, main backgrounds, or branding to establish a sense of depth and stability.

secondary

Apply #6B8E23 for subheadings, navigation, or supporting graphical elements, offering a rich, earthy complement.

accent

Introduce #7FFF00 or #9ACD32 for striking calls-to-action, icons, or interactive elements to add a vibrant, energetic pop.

background

A lighter shade like #B0E065 can serve as a soft, natural background, providing a breathable space for content.

text

For body text, use a dark charcoal or black. For larger headings, #3A5F45 offers excellent readability and blends with the palette.

Accessibility notes

  • Ensure sufficient contrast when placing brighter greens like #7FFF00 or #9ACD32 on lighter backgrounds.
  • Text on #B0E065 should be dark (e.g., black or #3A5F45) to meet WCAG contrast guidelines.
  • Avoid using #7FFF00 for small body text due to its high luminosity, reserving it for larger headings or accents.
  • Verify color contrast for all interactive elements to ensure they are easily discernible for all users.

Recommended combinations

Earthy Roots

Creates a grounded, organic feel, perfect for natural product packaging or sustainable branding.

#3A5F45 · #6B8E23 · #B0E065

Succulent Bloom

Highlights vibrant life and growth, suitable for energetic and fresh visual communications.

#9ACD32 · #7FFF00 · #6B8E23

Garden Fresh

Offers a balanced, refreshing look, ideal for clean interfaces or inviting web designs.

#B0E065 · #3A5F45 · #9ACD32

CSS variables

:root {
  --lush-succulent-garden-1: #3A5F45;
  --lush-succulent-garden-2: #6B8E23;
  --lush-succulent-garden-3: #9ACD32;
  --lush-succulent-garden-4: #B0E065;
  --lush-succulent-garden-5: #7FFF00;
}

Tailwind config

theme: {
  extend: {
    colors: {
      "lush-succulent-garden": {
        1: "#3A5F45",
        2: "#6B8E23",
        3: "#9ACD32",
        4: "#B0E065",
        5: "#7FFF00",
      }
    }
  }
}

Related searches

succulent color paletteearthy green designsnatural garden colorsorganic brand colorsbotanical web design

Palette colors

Hex values

Color 1#3A5F45
·
Color 2#6B8E23
·
Color 3#9ACD32
·
Color 4#B0E065
·
Color 5#7FFF00
·

Accessibility

Contrast checker

1
2
3
4
5
1
1.9:1Fail
3.8:1AA18
4.7:1AA
5.6:1AA
2
1.9:1Fail
2:1Fail
2.5:1Fail
2.9:1Fail
3
3.8:1AA18
2:1Fail
1.2:1Fail
1.5:1Fail
4
4.7:1AA
2.5:1Fail
1.2:1Fail
1.2:1Fail
5
5.6:1AA
2.9:1Fail
1.5:1Fail
1.2:1Fail

Similar palettes

More like Lush Succulent Garden

View all earth