Back to palettes

Palette

Dewdrop Emerald Vine

Refreshing greens and teals like lush vines adorned with morning dew, vibrant and alive.

coolnatural5 colors
More cool palettes

Preview

See it in context.

Interface

New

Ready when you are.

A quick look at how Dewdrop Emerald Vine 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 Dewdrop Emerald Vine.

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

Data visualization

#52C4B7#4AB3A4#42A292#3A9080#327E6F

Palette guide

How to use Dewdrop Emerald Vine

Overview

The Dewdrop Emerald Vine palette presents a refreshing cascade of greens and teals, embodying the lushness of nature. With shades ranging from the bright #52C4B7 to the deep, grounding #327E6F, this collection offers designers a sophisticated yet organic feel. It's perfectly suited for projects seeking to convey freshness, growth, and tranquility. The subtle variations between #4AB3A4 and #42A292 allow for intricate layering and depth, making it ideal for creating serene digital experiences or natural-themed branding. This palette provides a harmonious blend that is both calming and invigorating.

Best used for

  • Eco-friendly product packaging
  • Spa and wellness brand identity
  • Nature-themed websites or apps
  • Botanical illustration and design
  • Sustainable fashion branding
  • Educational content about environment

Suggested color roles

primary

The deepest shade, #327E6F, provides a strong foundation for primary text, navigation, or significant graphical elements.

secondary

Use #3A9080 for subheadings, secondary buttons, or large background blocks to add depth without being too dark.

accent

The vibrant #52C4B7 can be used sparingly for interactive elements, icons, or to draw attention to key information.

background

#42A292 can serve as a calming background, or pair with a near-white for better contrast with darker elements.

text

For body text, #327E6F or black/charcoal offers excellent readability against lighter shades in the palette.

Accessibility notes

  • Ensure sufficient contrast when using mid-tone greens for text on similar backgrounds, like #4AB3A4 on #42A292.
  • The darkest color, #327E6F, provides strong contrast for text against all lighter shades in the palette.
  • Avoid using #52C4B7 for small text, as its lightness might challenge readability on certain backgrounds.
  • Pair #327E6F with #52C4B7 for high visibility in headings and important calls-to-action.

Recommended combinations

Nature's Depth

Creates a natural gradient perfect for backgrounds or layered graphical elements, adding visual interest.

#327E6F · #4AB3A4 · #52C4B7

Refreshing Highlight

Ideal for highlighting key information or interactive elements, ensuring they stand out with a fresh feel.

#3A9080 · #52C4B7 · #42A292

Subtle Harmony

Great for subtle UI elements, borders, or secondary content areas where a gentle transition is preferred.

#4AB3A4 · #42A292 · #3A9080

CSS variables

:root {
  --dewdrop-emerald-vine-1: #52C4B7;
  --dewdrop-emerald-vine-2: #4AB3A4;
  --dewdrop-emerald-vine-3: #42A292;
  --dewdrop-emerald-vine-4: #3A9080;
  --dewdrop-emerald-vine-5: #327E6F;
}

Tailwind config

theme: {
  extend: {
    colors: {
      "dewdrop-emerald-vine": {
        1: "#52C4B7",
        2: "#4AB3A4",
        3: "#42A292",
        4: "#3A9080",
        5: "#327E6F",
      }
    }
  }
}

Related searches

emerald green paletteteal green nature colorsbotanical color schemefresh green brand identitydewdrop green shades

Palette colors

Hex values

Color 1#52C4B7
·
Color 2#4AB3A4
·
Color 3#42A292
·
Color 4#3A9080
·
Color 5#327E6F
·

Accessibility

Contrast checker

1
2
3
4
5
1
1.2:1Fail
1.5:1Fail
1.8:1Fail
2.3:1Fail
2
1.2:1Fail
1.2:1Fail
1.5:1Fail
1.9:1Fail
3
1.5:1Fail
1.2:1Fail
1.2:1Fail
1.6:1Fail
4
1.8:1Fail
1.5:1Fail
1.2:1Fail
1.3:1Fail
5
2.3:1Fail
1.9:1Fail
1.6:1Fail
1.3:1Fail

Similar palettes

More like Dewdrop Emerald Vine

View all cool