Back to palettes

Palette

Earthy Herb Garden

Fresh and inviting greens, reflecting the lush abundance of a sun-drenched herb garden.

earthnatural5 colors
More earth palettes

Preview

See it in context.

Interface

New

Ready when you are.

A quick look at how Earthy Herb 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 Earthy Herb Garden.

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

Data visualization

#3CB371#6B8E23#9ACD32#BDB76B#8FBC8F

Palette guide

How to use Earthy Herb Garden

Overview

The Earthy Herb Garden palette is a fresh and inviting collection of greens, reflecting the lush abundance of a sun-drenched herb garden. Featuring vibrant tones like #3CB371 (Medium Sea Green) and #9ACD32 (Yellow Green), complemented by the softer #BDB76B (Dark Khaki) and #8FBC8F (Dark Sea Green), this palette offers a natural and revitalizing aesthetic. Designers can leverage these colors to create designs that feel organic, fresh, and deeply connected to nature, perfect for eco-friendly brands, wellness platforms, or gardening-related content that emphasizes growth and vitality.

Best used for

  • Organic food and produce branding
  • Gardening and landscaping websites
  • Natural wellness and health products
  • Eco-friendly initiatives and campaigns
  • Farmers market promotions and materials
  • Botanical illustrations and nature art

Suggested color roles

primary

#3CB371 (Medium Sea Green) serves as a fresh, vibrant green for primary branding, headings, and impactful elements.

secondary

#6B8E23 (Olive Drab) offers a rich, earthy green for subheadings, important content blocks, and supporting UI elements.

accent

#9ACD32 (Yellow Green) provides a bright, energetic green for calls to action, key highlights, or interactive elements.

background

#8FBC8F (Dark Sea Green) creates a muted, gentle green that provides a soft, natural backdrop and enhances readability.

text

Use a dark charcoal or black on #8FBC8F for optimal readability, or #3CB371 for headings to maintain brand identity.

Accessibility notes

  • Ensure sufficient contrast for all text, especially with lighter greens like #BDB76B on #8FBC8F; prefer darker text.
  • While #3CB371 on #8FBC8F works for headings, body text may require higher contrast (e.g., black or dark gray).
  • Consider using a very dark green or black for body text to ensure legibility across all backgrounds.
  • Avoid using adjacent greens with low contrast for interactive elements, ensuring clear visual distinction.

Recommended combinations

Garden Fresh

Create vibrant, energetic, and natural combinations for highlights, calls to action, or fresh graphic elements.

#3CB371 · #9ACD32 · #8FBC8F

Earthy Greens

Apply layered greens for depth and texture in backgrounds, illustrations, or content blocks.

#6B8E23 · #BDB76B · #3CB371

Herb Contrast

Design with a muted background, vibrant primary, and rich secondary for a balanced and organic layout.

#8FBC8F · #3CB371 · #6B8E23

CSS variables

:root {
  --earthy-herb-garden-1: #3CB371;
  --earthy-herb-garden-2: #6B8E23;
  --earthy-herb-garden-3: #9ACD32;
  --earthy-herb-garden-4: #BDB76B;
  --earthy-herb-garden-5: #8FBC8F;
}

Tailwind config

theme: {
  extend: {
    colors: {
      "earthy-herb-garden": {
        1: "#3CB371",
        2: "#6B8E23",
        3: "#9ACD32",
        4: "#BDB76B",
        5: "#8FBC8F",
      }
    }
  }
}

Related searches

herb garden colorsnatural green paletteorganic fresh designearthy botanical schemevibrant nature tones

Palette colors

Hex values

Color 1#3CB371
·
Color 2#6B8E23
·
Color 3#9ACD32
·
Color 4#BDB76B
·
Color 5#8FBC8F
·

Accessibility

Contrast checker

1
2
3
4
5
1
1.4:1Fail
1.4:1Fail
1.3:1Fail
1.2:1Fail
2
1.4:1Fail
2:1Fail
1.8:1Fail
1.8:1Fail
3
1.4:1Fail
2:1Fail
1.1:1Fail
1.1:1Fail
4
1.3:1Fail
1.8:1Fail
1.1:1Fail
1:1Fail
5
1.2:1Fail
1.8:1Fail
1.1:1Fail
1:1Fail

Similar palettes

More like Earthy Herb Garden

View all earth