Palette

Thyme Herb

Subtle, fresh greens with a hint of gray, like the fragrant leaves of garden thyme in morning dew.

earthcalm5 colors

More earth palettes

Preview

See it in context.

Interface

New

Ready when you are.

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

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

Data visualization

#4F5D48#778C70#A6BCA0#D9E7D3#3D4A38

Palette guide

How to use Thyme Herb

Overview

The Thyme Herb palette presents a refreshing collection of subtle, earthy greens, evoking the natural tranquility of a herb garden. Ranging from the deep #3D4A38 to the light #D9E7D3, these colors are perfect for organic branding, wellness applications, or any design seeking a fresh, muted aesthetic. Designers can effectively use #778C70 for calming backgrounds, while #A6BCA0 offers a gentle accent. Developers will appreciate this palette for creating harmonious digital experiences, ensuring a consistent natural feel across various platforms. Its inherent calm makes it ideal for projects emphasizing sustainability, health, or serene environments, providing a soft yet sophisticated foundation.

Best used for

Organic food branding
Wellness and spa websites
Eco-friendly product packaging
Gardening and botanical apps
Natural beauty product lines
Sustainable living blogs

Suggested color roles

primary

Use #3D4A38 as a strong, grounding green for headers, footers, or dominant brand elements that require depth.

secondary

Apply #4F5D48 for subheadings, navigation, or as a background for sections needing a slightly richer tone.

accent

Utilize #A6BCA0 sparingly for subtle highlights, interactive elements, or to draw attention without harshness.

background

Employ #D9E7D3 as a light, fresh canvas for content, ensuring excellent readability and a natural feel.

text

For primary body text on light backgrounds like #D9E7D3, use #3D4A38 or #4F5D48 to ensure high contrast. #778C70 can work for secondary text.

Accessibility notes

Ensure sufficient contrast when pairing #A6BCA0 with #D9E7D3 for text, as they have low contrast.
Use #3D4A38 or #4F5D48 for main body text on #D9E7D3 to meet WCAG AA contrast guidelines.
Avoid using lighter greens like #A6BCA0 for small text; reserve them for larger display text or non-text elements.
Consider providing a darker border or shadow when using lighter greens for interactive components to enhance visibility.

Recommended combinations

Garden Fresh

Provides a strong, readable contrast for text and background, with a fresh mid-green for accents or secondary content.

#3D4A38 · #D9E7D3 · #778C70

Muted Harmony

Creates a soft, layered effect ideal for card elements, subtle gradients, or background patterns.

#4F5D48 · #A6BCA0 · #778C70

Earthy Base

A light, natural background combined with two darker greens for clear information hierarchy and depth.

#D9E7D3 · #4F5D48 · #3D4A38

CSS variables

:root {
  --thyme-herb-1: #4F5D48;
  --thyme-herb-2: #778C70;
  --thyme-herb-3: #A6BCA0;
  --thyme-herb-4: #D9E7D3;
  --thyme-herb-5: #3D4A38;
}

Tailwind config

theme: {
  extend: {
    colors: {
      "thyme-herb": {
        1: "#4F5D48",
        2: "#778C70",
        3: "#A6BCA0",
        4: "#D9E7D3",
        5: "#3D4A38",
      }
    }
  }
}

Hex values

Color 1#4F5D48

Color 2#778C70

Color 3#A6BCA0

Color 4#D9E7D3

Color 5#3D4A38

Accessibility

Contrast checker

1.9:1Fail

3.5:1AA18

5.5:1AA

1.3:1Fail

1.9:1Fail

1.8:1Fail

2.8:1Fail

2.6:1Fail

3.5:1AA18

1.8:1Fail

1.6:1Fail

4.6:1AA

5.5:1AA

2.8:1Fail

1.6:1Fail

7.3:1AAA

1.3:1Fail

2.6:1Fail

4.6:1AA

7.3:1AAA

Similar palettes

More like Thyme Herb

View all earth

Enchanted Garden Gate

Garden Gate Ivy

Herbal Tea Steam

Whispering Willow Grove

Zen Bamboo Garden

Zen Garden Serene