Palette

Forest Bathing

A tranquil blend of deep and olive greens, invoking the peaceful, rejuvenating practice of shinrin-yoku.

EarthNatural5 colors

More Earth palettes

Preview

See it in context.

Interface

New

Ready when you are.

A quick look at how Forest Bathing 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 Forest Bathing.

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

Data visualization

#013220#2E8B57#6B8E23#A9A970#BDB76B

Palette guide

How to use Forest Bathing

Overview

The Forest Bathing palette embodies the tranquil and rejuvenating practice of shinrin-yoku with its blend of deep and olive greens. From the profound #013220 to the vibrant #2E8B57 and the soothing #BDB76B, this collection fosters a sense of peace and natural harmony. Designers and developers will find these hues ideal for creating wellness-focused applications, eco-friendly branding, or digital spaces that promote calm and mindfulness. The palette's organic progression from deep forest shades to sun-dappled olive tones provides a versatile foundation for designs that aim to feel fresh, grounded, and inherently serene.

Best used for

Wellness and meditation apps
Eco-tourism and nature conservation
Sustainable living blogs and brands
Organic product packaging
Environmental non-profit organizations
Spa and holistic health services

Suggested color roles

primary

Utilize #013220 as a deep, grounding forest green for main headings, navigation, or strong brand presence.

secondary

Employ #2E8B57 for supporting content, vibrant accents, or to represent growth and vitality.

accent

Apply #BDB76B as a light, golden-olive highlight for subtle details, interactive states, or decorative elements.

background

Consider a very light cream or off-white for a clean background, or #A9A970 for a soft, natural base.

text

For optimal readability, use #013220 or a deep charcoal/black for body text on lighter backgrounds.

Accessibility notes

Ensure #013220 text on a light background (e.g., white or light cream) meets WCAG AA contrast.
Avoid using #A9A970 and #BDB76B for small body text due to low contrast with light backgrounds; reserve for larger elements.
Use #013220 or #2E8B57 for critical text elements on lighter backgrounds to ensure readability.
Test all color combinations for sufficient contrast, especially for interactive elements and form fields.

Recommended combinations

Deep Canopy

Ideal for branding for wellness, nature-focused websites, and refreshing visual identities.

#013220 · #2E8B57 · #BDB76B

Sunlit Moss

Perfect for soft gradients, natural illustrations, and serene background textures.

#6B8E23 · #A9A970 · #BDB76B

Tranquil Grove

Excellent for layered designs, headers, and accent elements in eco-friendly themes.

#013220 · #6B8E23 · #A9A970

CSS variables

:root {
  --forest-bathing-1: #013220;
  --forest-bathing-2: #2E8B57;
  --forest-bathing-3: #6B8E23;
  --forest-bathing-4: #A9A970;
  --forest-bathing-5: #BDB76B;
}

Tailwind config

theme: {
  extend: {
    colors: {
      "forest-bathing": {
        1: "#013220",
        2: "#2E8B57",
        3: "#6B8E23",
        4: "#A9A970",
        5: "#BDB76B",
      }
    }
  }
}

Hex values

Color 1#013220

Color 2#2E8B57

Color 3#6B8E23

Color 4#A9A970

Color 5#BDB76B

Accessibility

Contrast checker

3.3:1AA18

3.7:1AA18

5.8:1AA

6.9:1AA

3.3:1AA18

1.1:1Fail

1.7:1Fail

2.1:1Fail

3.7:1AA18

1.1:1Fail

1.6:1Fail

1.8:1Fail