Palette

Mystic Herb Garden

A tranquil blend of greens and muted tones found in a quiet, flourishing herb garden.

earthcalm5 colors

More earth palettes

Preview

See it in context.

Interface

New

Ready when you are.

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

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

Data visualization

#27AE60#2ECC71#2C3E50#16A085#7F8C8D

Palette guide

How to use Mystic Herb Garden

Overview

The "Mystic Herb Garden" palette offers a tranquil and organic blend of vibrant greens and sophisticated muted tones, reminiscent of a flourishing, peaceful herb garden. Featuring the lively #27AE60 and #2ECC71, balanced by the deep #2C3E50 and the subtle #16A085, this collection exudes freshness and natural calm. The grounding #7F8C8D adds a touch of earthy elegance, creating a versatile and inviting aesthetic. This palette is ideal for designs that aim to convey health, sustainability, and a clean, natural approach, perfect for a modern, organic brand identity.

Best used for

Herbal product packaging and branding
Health and wellness website design
Organic food and beverage marketing
Sustainable business visual identity
Garden design and landscaping services
Minimalist UI for eco-friendly apps

Suggested color roles

primary

Utilize #2C3E50 as the foundational deep blue-grey, ideal for strong headers, primary branding, or as a sophisticated background.

secondary

Employ #27AE60 for vibrant supporting elements, subheadings, or calls to action, providing a fresh, energetic contrast.

accent

Apply #16A085 or #2ECC71 for striking accents, interactive elements, or graphic details, offering a lively and inviting pop of color.

background

Use #7F8C8D for a soft, neutral grey background, allowing the vibrant greens to stand out with clarity and providing a clean canvas.

text

For optimal readability on light backgrounds, use #2C3E50. For text on dark backgrounds, a crisp white or very light grey provides excellent contrast.

Accessibility notes

Ensure sufficient contrast between #2C3E50 text and #7F8C8D backgrounds for WCAG AA compliance.
Verify that vibrant greens like #27AE60 have enough contrast when used for text on #7F8C8D backgrounds.
Avoid using #7F8C8D for small text on similarly light backgrounds; opt for darker shades or larger font sizes.
Provide clear focus states for interactive elements, ensuring they are easily discernible.

Recommended combinations

Fresh Earth

Excellent for a clean, organic brand statement: deep base, neutral background, and a vibrant green accent for key messages.

#2C3E50 · #7F8C8D · #27AE60

Herbal Harmony

Ideal for content blocks or illustrations, blending vibrant greens with a teal accent and a dark blue-grey anchor.

#27AE60 · #16A085 · #2C3E50

Garden Mist

Perfect for serene UI elements or subtle backgrounds, using a soft grey base with harmonizing greens for details.

#7F8C8D · #2ECC71 · #16A085

CSS variables

:root {
  --mystic-herb-garden-1: #27AE60;
  --mystic-herb-garden-2: #2ECC71;
  --mystic-herb-garden-3: #2C3E50;
  --mystic-herb-garden-4: #16A085;
  --mystic-herb-garden-5: #7F8C8D;
}

Tailwind config

theme: {
  extend: {
    colors: {
      "mystic-herb-garden": {
        1: "#27AE60",
        2: "#2ECC71",
        3: "#2C3E50",
        4: "#16A085",
        5: "#7F8C8D",
      }
    }
  }
}

Hex values

Color 1#27AE60

Color 2#2ECC71

Color 3#2C3E50

Color 4#16A085

Color 5#7F8C8D

Accessibility

Contrast checker

1.4:1Fail

3.8:1AA18

1.1:1Fail

1.2:1Fail

1.4:1Fail

5.2:1AA

1.6:1Fail

1.7:1Fail

3.8:1AA18

5.2:1AA

3.3:1AA18

3.2:1AA18

1.1:1Fail

1.6:1Fail

3.3:1AA18

1.1:1Fail

1.2:1Fail

1.7:1Fail

3.2:1AA18

1.1:1Fail

Similar palettes

More like Mystic Herb Garden

Mystic Herb Garden

See it in context.

Ready when you are.

Built with Mystic Herb Garden.

How to use Mystic Herb Garden

Overview

Best used for

Suggested color roles

Accessibility notes

Recommended combinations

Fresh Earth

Herbal Harmony

Garden Mist

CSS variables

Tailwind config

Related searches

Hex values

Contrast checker

More like Mystic Herb Garden