Palette

Whispering Bamboo Grove

Cool, muted greens and blues, evoking the peaceful stillness of a bamboo grove.

coolcalm5 colors

More cool palettes

Preview

See it in context.

Interface

New

Ready when you are.

A quick look at how Whispering Bamboo Grove 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 Whispering Bamboo Grove.

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

Data visualization

#335C67#547A83#97B8C4#C2DBDD#E1F2F3

Palette guide

How to use Whispering Bamboo Grove

Overview

The Whispering Bamboo Grove palette (version 3) offers cool, muted greens and blues, evoking the peaceful stillness of a bamboo grove. From the deep #335C67 to the ethereal #E1F2F3, this collection is perfect for designs seeking a calm, serene, and subtly sophisticated aesthetic. The mid-tone #97B8C4 provides a soft, approachable quality, making it versatile for both backgrounds and accents. Designers can utilize the lightest shade for pristine, airy backgrounds, allowing the cool hues to create a sense of tranquility. It's an excellent choice for projects emphasizing zen, natural harmony, or modern minimalism.

Best used for

Spa and wellness retreats branding
Zen garden or meditation app design
Asian-inspired restaurant interiors
Minimalist home decor websites
Eco-friendly product packaging
Calm and serene digital interfaces

Suggested color roles

primary

#335C67 - A deep, cool teal that grounds the palette, ideal for strong brand elements or headers.

secondary

#547A83 - A softer, muted blue-green, perfect for subheadings, navigation, or secondary graphical elements.

accent

#97B8C4 - A light, airy blue that can be used for highlights, calls-to-action, or subtle decorative details.

background

#E1F2F3 - The lightest, almost white shade, ideal for clean, expansive backgrounds that enhance the airy feel.

text

#335C67 - An excellent choice for primary body text on lighter backgrounds like #E1F2F3 or #C2DBDD, ensuring strong readability.

Accessibility notes

Ensure sufficient contrast between text and background, especially with lighter blue-greens.
Use #335C67 or #547A83 for text on #E1F2F3 or #C2DBDD backgrounds to meet WCAG AA standards.
Avoid placing #97B8C4 text on #C2DBDD or #E1F2F3 backgrounds due to insufficient contrast.
For interactive elements, ensure distinct visual cues for hover and active states.

Recommended combinations

Zen Mist

Creates a light, ethereal background and soft layering, perfect for serene and spacious designs.

#E1F2F3 · #C2DBDD · #97B8C4

Still Waters

A balanced combination for main content areas, offering clear hierarchy with a refreshing, calm feel.

#335C67 · #547A83 · #C2DBDD

Deep Tranquility

Emphasizes the cooler, deeper tones, suitable for headers, footers, or moody nature-inspired graphics.

#335C67 · #547A83 · #97B8C4

CSS variables

:root {
  --whispering-bamboo-grove-3-1: #335C67;
  --whispering-bamboo-grove-3-2: #547A83;
  --whispering-bamboo-grove-3-3: #97B8C4;
  --whispering-bamboo-grove-3-4: #C2DBDD;
  --whispering-bamboo-grove-3-5: #E1F2F3;
}

Tailwind config

theme: {
  extend: {
    colors: {
      "whispering-bamboo-grove-3": {
        1: "#335C67",
        2: "#547A83",
        3: "#97B8C4",
        4: "#C2DBDD",
        5: "#E1F2F3",
      }
    }
  }
}

Hex values

Color 1#335C67

Color 2#547A83

Color 3#97B8C4

Color 4#C2DBDD

Color 5#E1F2F3

Accessibility

Contrast checker

1.6:1Fail

3.5:1AA18

5:1AA

6.3:1AA

1.6:1Fail

2.2:1Fail

3.2:1AA18

4.1:1AA18

3.5:1AA18

2.2:1Fail

1.5:1Fail

1.8:1Fail

5:1AA

3.2:1AA18

1.5:1Fail

1.3:1Fail

6.3:1AA

4.1:1AA18

1.8:1Fail

1.3:1Fail

Similar palettes

More like Whispering Bamboo Grove