Palette

Emerald Bough Serene

Lush greens and misty blues evoke the peaceful, shaded quiet beneath a towering tree canopy.

coolcalm5 colors

More cool palettes

Preview

See it in context.

Interface

New

Ready when you are.

A quick look at how Emerald Bough Serene 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 Emerald Bough Serene.

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

Data visualization

#0F4C5C#20A39E#5DB7DE#8EE4AF#C6EBBE

Palette guide

How to use Emerald Bough Serene

Overview

The Emerald Bough Serene palette blends lush greens and misty blues, evoking the peaceful, shaded quiet beneath a towering tree canopy. Featuring deep teal-blue (#0F4C5C), vibrant medium teal (#20A39E), airy sky blue (#5DB7DE), fresh light green (#8EE4AF), and a very light green (#C6EBBE), this palette is truly tranquil. It's ideal for designers and developers seeking to create a serene, expansive, and natural aesthetic. This collection is perfect for projects that require a sense of calm, clarity, and refreshing elegance, reminiscent of a peaceful forest glade on a clear day.

Best used for

Environmental and conservation websites
Wellness and mindfulness app interfaces
Outdoor adventure and nature photography
Brand identities for sustainable businesses
Tranquil educational platforms
Digital art depicting serene landscapes

Suggested color roles

primary

Deep teal-blue (#0F4C5C) serves as a grounding primary, perfect for headers, navigation, or strong brand elements, providing depth and stability.

secondary

Vibrant medium teal (#20A39E) acts as an invigorating secondary, ideal for subheadings, interactive components, or sections needing a fresh, natural lift.

accent

Sky blue (#5DB7DE) offers an airy, bright accent, perfect for highlights, small icons, or calls-to-action that need to stand out with a refreshing clarity.

background

Very light green (#C6EBBE) provides a serene, expansive background, excellent for content areas or large sections where readability and a calm feel are desired.

text

Deep teal-blue (#0F4C5C) works well for body text on lighter backgrounds, ensuring high readability with a cohesive, natural aesthetic, or use a deep charcoal for maximum contrast.

Accessibility notes

Deep teal-blue (#0F4C5C) provides excellent contrast against very light green (#C6EBBE) for readable body text.
Ensure sufficient contrast if using vibrant medium teal (#20A39E) for text on the very light green (#C6EBBE) background.
Always verify that all text and interactive element contrasts meet WCAG 2.1 AA standards for optimal accessibility.
Avoid placing sky blue (#5DB7DE) on very light green (#C6EBBE) for critical text due to potential low contrast.

Recommended combinations

Canopy Shade

Creates a sophisticated, calming depth, ideal for backgrounds, main content areas, or elegant graphic elements.

#0F4C5C · #20A39E · #C6EBBE

Misty Glade

Excellent for highlights, interactive elements, or bringing a light, ethereal quality to the design.

#5DB7DE · #8EE4AF · #0F4C5C

Forest Breeze

Provides a balanced and refreshing combination for subheadings, descriptive text, or subtle background patterns.

#20A39E · #C6EBBE · #8EE4AF

CSS variables

:root {
  --emerald-bough-serene-1: #0F4C5C;
  --emerald-bough-serene-2: #20A39E;
  --emerald-bough-serene-3: #5DB7DE;
  --emerald-bough-serene-4: #8EE4AF;
  --emerald-bough-serene-5: #C6EBBE;
}

Tailwind config

theme: {
  extend: {
    colors: {
      "emerald-bough-serene": {
        1: "#0F4C5C",
        2: "#20A39E",
        3: "#5DB7DE",
        4: "#8EE4AF",
        5: "#C6EBBE",
      }
    }
  }
}

Hex values

Color 1#0F4C5C

Color 2#20A39E

Color 3#5DB7DE

Color 4#8EE4AF

Color 5#C6EBBE

Accessibility

Contrast checker

3.1:1AA18

4.2:1AA18

6.3:1AA

7.3:1AAA

3.1:1AA18

1.4:1Fail

2:1Fail

2.4:1Fail

4.2:1AA18

1.4:1Fail

1.5:1Fail

1.7:1Fail

6.3:1AA

2:1Fail

1.5:1Fail

1.2:1Fail

7.3:1AAA

2.4:1Fail

1.7:1Fail

1.2:1Fail

Similar palettes

More like Emerald Bough Serene

View all cool

Enchanted Forest Stream

Evergreen Forest Retreat

Forest Canopy Glimmer

Forest Canopy Mist

Jungle Canopy Mist

Misted Woodland Path