Palette

Verdant Dewdrop Whisper

Evokes the peaceful tranquility of a misty forest morning, with fresh greens and soft, diffused light.

coolcalm5 colors

More cool palettes

Preview

See it in context.

Interface

New

Ready when you are.

A quick look at how Verdant Dewdrop Whisper 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 Verdant Dewdrop Whisper.

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

Data visualization

#4A6C5B#6A8D7E#A0C3AD#D3DEDC#F4F7F6

Palette guide

How to use Verdant Dewdrop Whisper

Overview

The Verdant Dewdrop Whisper palette evokes the peaceful tranquility of a misty forest morning, with fresh greens and soft, diffused light. This serene collection features the calming `#4A6C5B`, the gentle `#6A8D7E`, and the airy `#A0C3AD`, all harmonized by the clean, near-white `#F4F7F6`. Designers and developers can leverage these cool, muted tones to craft interfaces and brands that convey calm, freshness, and understated elegance. It's particularly effective for projects aiming for a soft, inviting aesthetic that resonates with a sense of peace and natural harmony across digital and print mediums.

Best used for

Wellness and meditation app interfaces
Spa or beauty product packaging
Serene home decor branding
Eco-conscious fashion lines
Photography websites for nature or landscapes
Gentle educational content for children

Suggested color roles

primary

Use `#6A8D7E` as the soft, inviting main green, conveying calm and natural elegance.

secondary

Employ `#4A6C5B` for deeper elements, strong headings, or footers, providing a subtle anchor.

accent

Apply `#A0C3AD` for subtle highlights, interactive elements, or secondary calls to action, maintaining softness.

background

Utilize `#F4F7F6` as an airy, clean background, allowing content to feel light and open.

text

Choose `#4A6C5B` for primary text on light backgrounds for excellent readability and a harmonious feel.

Accessibility notes

Ensure `#4A6C5B` text on `#F4F7F6` provides good contrast, meeting WCAG AA standards.
Be cautious when using `#A0C3AD` or `#D3DEDC` for small text, especially on light backgrounds, due to potential low contrast.
Use `#6A8D7E` for larger text or interactive elements on lighter backgrounds for better visibility.
Regularly check all text and UI element contrast ratios to ensure accessibility for all users.

Recommended combinations

Misty Morning

Creates a soft, ethereal contrast, perfect for hero images or tranquil sections.

#4A6C5B · #A0C3AD · #F4F7F6

Soft Layers

Ideal for subtle gradients or layered designs that require a gentle, flowing transition.

#6A8D7E · #A0C3AD · #D3DEDC

Tranquil Depth

Excellent for backgrounds and textural elements that require a muted, sophisticated presence.

#4A6C5B · #6A8D7E · #D3DEDC

CSS variables

:root {
  --verdant-dewdrop-whisper-1: #4A6C5B;
  --verdant-dewdrop-whisper-2: #6A8D7E;
  --verdant-dewdrop-whisper-3: #A0C3AD;
  --verdant-dewdrop-whisper-4: #D3DEDC;
  --verdant-dewdrop-whisper-5: #F4F7F6;
}

Tailwind config

theme: {
  extend: {
    colors: {
      "verdant-dewdrop-whisper": {
        1: "#4A6C5B",
        2: "#6A8D7E",
        3: "#A0C3AD",
        4: "#D3DEDC",
        5: "#F4F7F6",
      }
    }
  }
}

Hex values

Color 1#4A6C5B

Color 2#6A8D7E

Color 3#A0C3AD

Color 4#D3DEDC

Color 5#F4F7F6

Accessibility

Contrast checker

1.6:1Fail

3:1AA18

4.3:1AA18

5.4:1AA

1.6:1Fail

1.9:1Fail

2.7:1Fail

3.4:1AA18

3:1AA18

1.9:1Fail

1.4:1Fail

1.8:1Fail

4.3:1AA18

2.7:1Fail

1.4:1Fail

1.3:1Fail

5.4:1AA

3.4:1AA18

1.8:1Fail

1.3:1Fail

Similar palettes

More like Verdant Dewdrop Whisper

View all cool

Emerald Bough Serene

Enchanted Forest Stream