Palette

Japanese Tea Garden

Quiet and tranquil greens reminiscent of a serene Japanese tea garden, with lush moss and bamboo.

earthcalm5 colors

More earth palettes

Preview

See it in context.

Interface

New

Ready when you are.

A quick look at how Japanese Tea 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 Japanese Tea Garden.

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

Data visualization

#C1D8AC#8FA87F#5C7B65#3A5040#E0EADD

Palette guide

How to use Japanese Tea Garden

Overview

The Japanese Tea Garden color palette evokes a profound sense of calm and tranquility, drawing inspiration from lush natural landscapes. This serene collection features soft greens like #C1D8AC and #8FA87F, deepening into more grounded tones such as #5C7B65 and the rich #3A5040. A delicate, near-white #E0EADD provides a perfect airy counterpoint. Designers and developers can leverage this palette to create digital and physical experiences that promote relaxation, harmony, and a connection to nature. It's ideal for projects seeking a sophisticated yet understated organic aesthetic, ensuring a balanced and peaceful visual journey.

Best used for

Spa and wellness branding
Eco-friendly product packaging design
Nature-themed websites or blogs
Interior design mood boards for zen spaces
Educational content on botany or environment
Sustainable fashion brand identity

Suggested color roles

primary

A grounded, sophisticated green, #5C7B65 is perfect for main headings, prominent UI elements, or large background sections that require a sense of stability and depth.

secondary

A lighter, versatile green, #8FA87F is suitable for subheadings, secondary buttons, or large content blocks, offering a gentle yet distinct contrast to the primary shade.

accent

A delicate, refreshing green, #C1D8AC is ideal for subtle highlights, interactive states, small decorative elements, or to add a touch of lightness to compositions.

background

A soft, inviting off-white, #E0EADD provides a clean, tranquil canvas. It ensures excellent readability for darker text and offers a spacious, airy feel to any design.

text

A deep, earthy green, #3A5040 offers strong contrast and excellent readability for body text, ensuring legibility against lighter backgrounds. For maximum contrast in headings, consider a true black or dark charcoal.

Accessibility notes

Ensure #3A5040 text on #E0EADD background meets WCAG AA contrast standards for optimal readability.
Be cautious when using #C1D8AC for small text on #E0EADD, as the contrast might be insufficient for accessibility.
Utilize #5C7B65 or #3A5040 for crucial interactive elements to ensure they are clearly discernible against lighter green backgrounds.
Provide alternative visual cues for color-coded information, especially when differentiating between the mid-greens like #8FA87F and #5C7B65.

Recommended combinations

Tranquil Base

Ideal for clean, airy interfaces or backgrounds where a sense of calm and spaciousness is paramount, with gentle visual hierarchy.

#E0EADD · #C1D8AC · #8FA87F

Earthy Depth

Excellent for conveying depth and natural richness; suitable for branding, photography portfolios, or elements requiring a strong, organic presence.

#8FA87F · #5C7B65 · #3A5040

Subtle Contrast

Perfect for clear content presentation with a soft accent. Use #E0EADD for background, #3A5040 for text, and #C1D8AC for highlights or interactive states.

#E0EADD · #3A5040 · #C1D8AC

CSS variables

:root {
  --japanese-tea-garden-1: #C1D8AC;
  --japanese-tea-garden-2: #8FA87F;
  --japanese-tea-garden-3: #5C7B65;
  --japanese-tea-garden-4: #3A5040;
  --japanese-tea-garden-5: #E0EADD;
}

Tailwind config

theme: {
  extend: {
    colors: {
      "japanese-tea-garden": {
        1: "#C1D8AC",
        2: "#8FA87F",
        3: "#5C7B65",
        4: "#3A5040",
        5: "#E0EADD",
      }
    }
  }
}

Hex values

Color 1#C1D8AC

Color 2#8FA87F

Color 3#5C7B65

Color 4#3A5040

Color 5#E0EADD

Accessibility

Contrast checker

1.7:1Fail

3.1:1AA18

5.7:1AA

1.2:1Fail

1.7:1Fail

1.8:1Fail

3.4:1AA18

2.1:1Fail

3.1:1AA18

1.8:1Fail

1.9:1Fail

3.8:1AA18

5.7:1AA

3.4:1AA18

1.9:1Fail

7.1:1AAA

1.2:1Fail

2.1:1Fail

3.8:1AA18

7.1:1AAA

Similar palettes

More like Japanese Tea Garden

View all earth

Tranquil Bamboo Grove