Palette

Riverside Willow Dream

Soft, muted greens and cool grays that echo the gentle rustle of willow leaves by a tranquil, sun-dappled stream.

coolcalm5 colors

More cool palettes

Preview

See it in context.

Interface

New

Ready when you are.

A quick look at how Riverside Willow Dream 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 Riverside Willow Dream.

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

Data visualization

#B2C7C7#D0E0DE#E9F4F2#8EAAAC#6A8B8D

Palette guide

How to use Riverside Willow Dream

Overview

The Riverside Willow Dream palette offers a collection of soft, muted greens and cool grays, evoking the gentle rustle of willow leaves by a tranquil stream. With a grounding #6A8B8D, a versatile #8EAAAC, and the ethereal #E9F4F2, this palette is perfect for designs seeking a calm, subtle, and natural aesthetic. Designers can leverage its delicate variations to create a serene atmosphere, ideal for conveying peace and quiet sophistication. Developers will find the clear progression of values useful for building light, airy user interfaces that prioritize readability and a harmonious visual experience across various applications, from wellness to lifestyle brands.

Best used for

Wellness and meditation apps
Eco-conscious fashion or home decor brands
Delicate wedding stationery or invitations
Serene interior design concepts
Nature photography websites
Subtle corporate communications

Suggested color roles

primary

Use #8EAAAC for main content areas or brand elements, providing a soft, understated cool-green.

secondary

Apply #B2C7C7 for supporting elements, subheadings, or subtle background panels, offering a harmonious lighter tone.

accent

Reserve #6A8B8D for impactful calls-to-action, important icons, or robust typography, ensuring stronger visual weight.

background

Employ #E9F4F2 as a light, expansive background, ensuring excellent readability and a fresh, airy feel.

text

A dark charcoal like #6A8B8D or a true black is essential for optimal readability against lighter backgrounds such as #E9F4F2.

Accessibility notes

Ensure #6A8B8D text on #E9F4F2 or #D0E0DE backgrounds meets WCAG AA contrast standards for legibility.
Be cautious when using #B2C7C7 or #D0E0DE for small text on #E9F4F2, as contrast will be insufficient.
For interactive elements, ensure distinct visual feedback (e.g., darker hover states or outlines).
A contrast checker is crucial for validating all text and background pairings, especially for smaller font sizes.

Recommended combinations

Gentle Contrast

Ideal for hero sections or main content blocks: #E9F4F2 background, #6A8B8D for headings, #8EAAAC for body.

#6A8B8D · #E9F4F2 · #8EAAAC

Layered Calm

Perfect for creating subtle depth in UI elements like cards or modal dialogues, using progressive lightness.

#D0E0DE · #B2C7C7 · #E9F4F2

Core Harmony

A balanced trio for general UI: #E9F4F2 for backgrounds, #8EAAAC for panels, and #6A8B8D for critical text.

#8EAAAC · #E9F4F2 · #6A8B8D

CSS variables

:root {
  --riverside-willow-dream-1: #B2C7C7;
  --riverside-willow-dream-2: #D0E0DE;
  --riverside-willow-dream-3: #E9F4F2;
  --riverside-willow-dream-4: #8EAAAC;
  --riverside-willow-dream-5: #6A8B8D;
}

Tailwind config

theme: {
  extend: {
    colors: {
      "riverside-willow-dream": {
        1: "#B2C7C7",
        2: "#D0E0DE",
        3: "#E9F4F2",
        4: "#8EAAAC",
        5: "#6A8B8D",
      }
    }
  }
}

Hex values

Color 1#B2C7C7

Color 2#D0E0DE

Color 3#E9F4F2

Color 4#8EAAAC

Color 5#6A8B8D

Accessibility

Contrast checker

1.3:1Fail

1.6:1Fail

1.4:1Fail

2.1:1Fail

1.3:1Fail

1.2:1Fail

1.8:1Fail

2.7:1Fail

1.6:1Fail

1.2:1Fail

2.2:1Fail

3.3:1AA18

1.4:1Fail

1.8:1Fail

2.2:1Fail

1.5:1Fail

2.1:1Fail

2.7:1Fail

3.3:1AA18

1.5:1Fail

Similar palettes

More like Riverside Willow Dream

Enchanted Forest Stream

Forest Canopy Mist