Palette

Herb Garden Bloom

A fresh and soothing palette of various greens, evoking the tranquil beauty of a thriving herb garden.

earthnatural5 colors

More earth palettes

Preview

See it in context.

Interface

New

Ready when you are.

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

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

Data visualization

#4A6E4F#7EB884#AED6B2#D8EAC2#F0F9E9

Palette guide

How to use Herb Garden Bloom

Overview

The Herb Garden Bloom palette offers a tranquil and fresh spectrum of greens, perfect for designs seeking a natural, soothing aesthetic. Anchored by the deep forest green #4A6E4F, it transitions through vibrant mid-tones like #7EB884 and #AED6B2, culminating in the airy, near-white #F0F9E9. This harmonious collection is ideal for evoking growth, health, and serenity. Designers can leverage its gentle progression for intuitive visual hierarchies, while developers will appreciate its consistent mood across various UI elements. It’s a versatile choice for projects aiming to communicate organic purity and calm, providing a gentle yet effective visual language.

Best used for

Organic food and beverage branding
Wellness and spa website design
Eco-friendly product packaging
Nature-themed educational materials
Interior design for calming spaces
Gardening and botanical publications

Suggested color roles

primary

#4A6E4F – Use for dominant branding elements, main headings, and strong calls to action.

secondary

#7EB884 – Ideal for subheadings, interactive elements, and illustrations requiring a vibrant yet grounded touch.

accent

#AED6B2 – Best for highlights, subtle buttons, decorative patterns, or to draw attention to secondary information.

background

#F0F9E9 – Provides a clean, airy base for content, creating a sense of openness and freshness.

text

#4A6E4F – Offers excellent readability against lighter backgrounds like #F0F9E9 or #D8EAC2.

Accessibility notes

Ensure sufficient contrast between #4A6E4F text and #F0F9E9 or #D8EAC2 backgrounds for optimal readability.
Check contrast ratios for #7EB884 when used for interactive elements on lighter backgrounds like #F0F9E9.
Avoid using #AED6B2 or #D8EAC2 for small body text against #F0F9E9 as contrast may be too low.
Always check WCAG guidelines for specific text sizes and color pairings to ensure broad accessibility.

Recommended combinations

Deep Contrast

Ideal for strong branding with a light background and a vibrant interactive element.

#4A6E4F · #F0F9E9 · #7EB884

Natural Gradient

Perfect for illustrating growth or creating subtle background textures and gradients.

#7EB884 · #AED6B2 · #D8EAC2

Highlight & Base

A classic light background, dark text, and a soft accent for UI components.

#F0F9E9 · #4A6E4F · #AED6B2

CSS variables

:root {
  --herb-garden-bloom-1: #4A6E4F;
  --herb-garden-bloom-2: #7EB884;
  --herb-garden-bloom-3: #AED6B2;
  --herb-garden-bloom-4: #D8EAC2;
  --herb-garden-bloom-5: #F0F9E9;
}

Tailwind config

theme: {
  extend: {
    colors: {
      "herb-garden-bloom": {
        1: "#4A6E4F",
        2: "#7EB884",
        3: "#AED6B2",
        4: "#D8EAC2",
        5: "#F0F9E9",
      }
    }
  }
}

Hex values

Color 1#4A6E4F

Color 2#7EB884

Color 3#AED6B2

Color 4#D8EAC2

Color 5#F0F9E9

Accessibility

Contrast checker

2.5:1Fail

3.6:1AA18

4.5:1AA

5.3:1AA

2.5:1Fail

1.4:1Fail

1.8:1Fail

2.1:1Fail

3.6:1AA18

1.4:1Fail

1.3:1Fail

1.5:1Fail

4.5:1AA

1.8:1Fail

1.3:1Fail

1.2:1Fail

5.3:1AA

2.1:1Fail

1.5:1Fail

1.2:1Fail

Similar palettes

More like Herb Garden Bloom

View all earth

Herbal Kitchen Garden

Apothecary Bloom Green

Botanical Bloom Burst

Botanical Herb Garden

Earthy Herb Garden

Herbal Garden Fresh