Palette

Wild Herb Garden

Lush, natural greens inspired by a vibrant botanical garden brimming with fragrant herbs and fresh growth.

earthnatural5 colors

More earth palettes

Preview

See it in context.

Interface

New

Ready when you are.

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

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

Data visualization

#5A7E4F#8AC27B#BBD1A8#3B5A33#7D9E73

Palette guide

How to use Wild Herb Garden

Overview

The Wild Herb Garden palette presents lush, natural greens inspired by a vibrant botanical garden brimming with fragrant herbs and fresh growth. This collection includes the invigorating #5A7E4F, the bright #8AC27B, a soft #BBD1A8, the deep #3B5A33, and the harmonious #7D9E73. For designers, these hues offer a fresh, organic feel, perfect for conveying health, vitality, and sustainability. Developers can integrate this palette to create user interfaces that are clean, inviting, and inherently connected to nature, promoting a sense of well-being and freshness in any application.

Best used for

Health and wellness product branding
Organic food and beverage packaging
Gardening and botanical website design
Eco-tourism marketing materials
Natural skincare and beauty product lines
Educational content about plants and nature

Suggested color roles

primary

Designate #5A7E4F as the core brand green, excellent for conveying freshness and vitality in logos and primary elements.

secondary

Use #7D9E73 for secondary headings, illustrations, or as a softer green accent that complements the primary hue.

accent

Reserve #3B5A33 for strong accents, important calls to action, or deep text, providing grounding contrast.

background

Apply #BBD1A8 as a light, natural background, offering a clean canvas that enhances the vibrancy of the other greens.

text

For optimal readability, use #3B5A33 or a dark charcoal for body text. #5A7E4F can be used for larger headlines on light backgrounds.

Accessibility notes

Ensure strong contrast when using #8AC27B or #7D9E73 for text on lighter backgrounds like #BBD1A8.
The deepest shade, #3B5A33, is ideal for body text to ensure maximum readability on light backgrounds.
Avoid using #BBD1A8 for small text sizes, as it may not meet WCAG contrast guidelines.
Consider larger font sizes or bolder weights for text in lighter green shades for better legibility.

Recommended combinations

Fresh Header

A crisp combination for main titles, with #BBD1A8 as background and #5A7E4F as a highlight.

#3B5A33 · #BBD1A8 · #5A7E4F

Leafy Accents

Creates a harmonious blend for decorative elements, icons, or subtle UI components.

#8AC27B · #7D9E73 · #BBD1A8

Natural UI

A balanced trio for user interfaces, using #BBD1A8 for panels, #5A7E4F for buttons, and #3B5A33 for text.

#BBD1A8 · #5A7E4F · #3B5A33

CSS variables

:root {
  --wild-herb-garden-1: #5A7E4F;
  --wild-herb-garden-2: #8AC27B;
  --wild-herb-garden-3: #BBD1A8;
  --wild-herb-garden-4: #3B5A33;
  --wild-herb-garden-5: #7D9E73;
}

Tailwind config

theme: {
  extend: {
    colors: {
      "wild-herb-garden": {
        1: "#5A7E4F",
        2: "#8AC27B",
        3: "#BBD1A8",
        4: "#3B5A33",
        5: "#7D9E73",
      }
    }
  }
}

Hex values

Color 1#5A7E4F

Color 2#8AC27B

Color 3#BBD1A8

Color 4#3B5A33

Color 5#7D9E73

Accessibility

Contrast checker

2.2:1Fail

2.8:1Fail

1.7:1Fail

1.5:1Fail

2.2:1Fail

1.3:1Fail

3.7:1AA18

1.4:1Fail

2.8:1Fail

1.3:1Fail

4.7:1AA

1.8:1Fail