Palette

Whispering Willow Shore

Captures the gentle beauty of a serene lake shore, with swaying willows and tranquil waters.

earthcalm5 colors

More earth palettes

Preview

See it in context.

Interface

New

Ready when you are.

A quick look at how Whispering Willow Shore 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 Willow Shore.

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

Data visualization

#809875#D8D2C2#A5CCDF#6B6A5C#F4F0E3

Palette guide

How to use Whispering Willow Shore

Overview

The Whispering Willow Shore palette captures the gentle beauty of a serene lake shore, with swaying willows and tranquil waters. It blends muted greens like #809875 with soft blues such as #A5CCDF and warm, sandy tones like #D8D2C2, creating a truly tranquil and natural aesthetic. Designers and developers can leverage the grounding #6B6A5C for subtle depth and the airy #F4F0E3 for clean backgrounds, ensuring a harmonious and calming user experience across various digital and print applications. This palette is ideal for conveying peace, natural beauty, and a sense of escape.

Best used for

Coastal resort branding
Nature and wildlife photography
Environmental conservation websites
Relaxation and mindfulness apps
Home decor and textile design
Travel and tourism promotions

Suggested color roles

primary

#809875 - A balanced, muted green that can serve as a primary brand color, buttons, or main content sections, offering a calming presence.

secondary

#A5CCDF - A soft, tranquil blue ideal for secondary elements, navigation accents, or to evoke water and sky in the design.

accent

#6B6A5C - A deep, earthy gray-brown perfect for grounding accents, strong text, or subtle details that need definition without harshness.

background

#F4F0E3 - A very light, creamy beige that creates a warm, clean, and inviting canvas for content, enhancing readability and a natural feel.

text

#6B6A5C - Excellent for body text on light backgrounds like #F4F0E3, offering good legibility and maintaining the palette's natural, muted tone. A dark charcoal also works well.

Accessibility notes

Ensure sufficient contrast for text when using #D8D2C2 or #F4F0E3 as backgrounds, especially with lighter text colors.
Pair the darkest shade #6B6A5C with the lightest #F4F0E3 for optimal text readability and WCAG AA compliance.
Avoid using #809875 or #A5CCDF for small text on #D8D2C2 backgrounds without thorough contrast checking.
Always verify contrast ratios for all text and interactive elements to ensure broad accessibility.

Recommended combinations

Shoreline Depth

Ideal for headers, footers, and primary sections where a sense of depth, earth, and water is desired.

#6B6A5C · #809875 · #A5CCDF

Tranquil Sands

Perfect for light, airy backgrounds, content cards, and subtle design elements that need a warm, sandy feel.

#F4F0E3 · #D8D2C2 · #809875

Willow Waters

Effective for main content areas, interactive components, and feature sections, blending natural greens with serene blues.

#809875 · #A5CCDF · #6B6A5C

CSS variables

:root {
  --whispering-willow-shore-1: #809875;
  --whispering-willow-shore-2: #D8D2C2;
  --whispering-willow-shore-3: #A5CCDF;
  --whispering-willow-shore-4: #6B6A5C;
  --whispering-willow-shore-5: #F4F0E3;
}

Tailwind config

theme: {
  extend: {
    colors: {
      "whispering-willow-shore": {
        1: "#809875",
        2: "#D8D2C2",
        3: "#A5CCDF",
        4: "#6B6A5C",
        5: "#F4F0E3",
      }
    }
  }
}

Hex values

Color 1#809875

Color 2#D8D2C2

Color 3#A5CCDF

Color 4#6B6A5C

Color 5#F4F0E3

Accessibility

Contrast checker

2.1:1Fail

1.8:1Fail

1.7:1Fail

2.8:1Fail

2.1:1Fail

1.1:1Fail

3.6:1AA18

1.3:1Fail

1.8:1Fail

1.1:1Fail

3.2:1AA18

1.5:1Fail

1.7:1Fail

3.6:1AA18

3.2:1AA18

4.8:1AA

2.8:1Fail

1.3:1Fail

1.5:1Fail

4.8:1AA

Similar palettes

More like Whispering Willow Shore

Whispering Cypress Grove