Palette

Heron Feather Dawn

Muted greens and soft greys, like the subtle colors of a heron's feathers at first light.

coolcalm5 colors

More cool palettes

Preview

See it in context.

Interface

New

Ready when you are.

A quick look at how Heron Feather Dawn 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 Heron Feather Dawn.

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

Data visualization

#CAD2C5#84A98C#52796F#354F52#2F3E46

Palette guide

How to use Heron Feather Dawn

Overview

The Heron Feather Dawn palette evokes a sense of serene tranquility, drawing inspiration from the subtle, muted colors of a heron's feathers at first light. This cool-toned collection features harmonious green-greys, from the soft #CAD2C5 to the deeper #2F3E46. Key colors like #84A98C and #52796F provide natural depth and a gentle connection to nature. This palette is exceptionally useful for designers and developers aiming to create experiences that are calming, sophisticated, and close to nature, without being overtly vibrant. It's perfect for conveying a peaceful, understated elegance.

Best used for

Wellness and meditation apps
Minimalist website designs
Eco-conscious brand identities
Nature-themed photography layouts
Serene interior design concepts
Sustainable product packaging

Suggested color roles

primary

Designate #52796F as the primary color for content sections, providing a deep, calming green-grey base that grounds the design.

secondary

Utilize #84A98C for supporting elements, subheadings, or secondary navigation, offering a gentler natural tone.

accent

Reserve #CAD2C5 for subtle highlights, background textures, or delicate UI elements where a soft, airy touch is needed.

background

Employ #CAD2C5 as a light, airy background color, creating an open and serene canvas for the darker tones.

text

Use #2F3E46 for body text and important headings to ensure maximum readability and a sophisticated, deep contrast.

Accessibility notes

Ensure #2F3E46 provides sufficient contrast against #CAD2C5 for all text sizes.
When using #52796F for text, verify it has adequate contrast on lighter backgrounds like #CAD2C5.
Avoid using #CAD2C5 for small text or critical information due to its light value.
Use a contrast checker to confirm readability for all color pairs, especially for interactive components.

Recommended combinations

Serene Base

Excellent for main content areas, providing a light background with clear, deep text and a calming accent.

#CAD2C5 · #52796F · #2F3E46

Natural Depth

Ideal for section headers, sub-navigation, or visual elements requiring a balanced, natural feel.

#84A98C · #354F52 · #CAD2C5

Subtle Harmony

Effective for creating a cohesive, peaceful visual hierarchy, with mid-tones supported by light and dark.

#52796F · #CAD2C5 · #2F3E46

CSS variables

:root {
  --heron-feather-dawn-1: #CAD2C5;
  --heron-feather-dawn-2: #84A98C;
  --heron-feather-dawn-3: #52796F;
  --heron-feather-dawn-4: #354F52;
  --heron-feather-dawn-5: #2F3E46;
}

Tailwind config

theme: {
  extend: {
    colors: {
      "heron-feather-dawn": {
        1: "#CAD2C5",
        2: "#84A98C",
        3: "#52796F",
        4: "#354F52",
        5: "#2F3E46",
      }
    }
  }
}

Hex values

Color 1#CAD2C5

Color 2#84A98C

Color 3#52796F

Color 4#354F52

Color 5#2F3E46

Accessibility

Contrast checker

1.7:1Fail

3.1:1AA18

5.7:1AA

7.1:1AAA

1.7:1Fail

1.9:1Fail

3.4:1AA18

4.2:1AA18

3.1:1AA18

1.9:1Fail

1.8:1Fail

2.3:1Fail

5.7:1AA

3.4:1AA18

1.8:1Fail

1.3:1Fail

7.1:1AAA

4.2:1AA18

2.3:1Fail

1.3:1Fail

Similar palettes

More like Heron Feather Dawn

Forest Stream Pebbles

Misty Forest Veil