Back to palettes

Palette

Emerald Coastline

Lush greens and clear aquas depicting vibrant foliage meeting the sparkling waters of a tropical coastline.

vibrantenergetic5 colors
More vibrant palettes

Preview

See it in context.

Interface

New

Ready when you are.

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

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

Data visualization

#50C878#7BDB8F#B2EDC7#3B9F5D#66B27A

Palette guide

How to use Emerald Coastline

Overview

The Emerald Coastline palette paints a picture of lush greens and clear aquas, depicting vibrant foliage meeting the sparkling waters of a tropical coastline. It features the lively #50C878, the fresh #7BDB8F, and the airy #B2EDC7, complemented by the deeper #3B9F5D and #66B27A. This palette is vibrant and energetic, perfect for designs that aim to convey tropical beauty, freshness, and an invigorating connection to nature. It's an excellent choice for travel and tourism branding, eco-friendly initiatives, or digital interfaces seeking a cheerful, lively, and harmonious aesthetic with a strong emphasis on lush, bright greenery.

Best used for

  • Tropical travel and resort marketing
  • Eco-conscious and sustainable product branding
  • Outdoor adventure and active lifestyle websites
  • Health and wellness apps with a natural theme
  • Summer fashion and beauty campaigns
  • Digital art with vibrant landscape themes

Suggested color roles

primary

Use #50C878 for dominant elements, headers, or backgrounds to establish vibrancy and a strong natural presence.

secondary

Employ #3B9F5D or #66B27A for supporting graphics, subheadings, or interactive elements, adding depth and balance.

accent

Apply #B2EDC7 for subtle highlights, delicate patterns, or ethereal background accents to introduce lightness and airiness.

background

Utilize #B2EDC7 for clean, airy backgrounds that allow the deeper greens to pop, or a crisp white for maximum contrast.

text

For body text, use a dark charcoal like #333333. For headlines on lighter backgrounds, #3B9F5D or #50C878 provides excellent readability. Use white for text on #3B9F5D.

Accessibility notes

  • Ensure #3B9F5D or #50C878 text on #B2EDC7 meets WCAG contrast standards.
  • Avoid using #B2EDC7 for small text on light backgrounds; it's best for large headlines or accents.
  • The lighter greens #7BDB8F and #B2EDC7 may have low contrast when used together; separate them.
  • Pair #3B9F5D with #B2EDC7 for a high-contrast, accessible combination for primary content.

Recommended combinations

Lush Canopy

Ideal for creating a profound, vibrant feel in branding, website hero sections, or illustrations with lush natural textures.

#3B9F5D · #50C878 · #7BDB8F

Sparkling Shore

Perfect for light UI elements, background gradients, or decorative patterns that need to convey freshness and vitality.

#7BDB8F · #B2EDC7 · #50C878

Tropical Contrast

Use for impactful call-to-action buttons, key highlights, or sections that require a bold yet naturally inviting visual statement.

#3B9F5D · #B2EDC7 · #50C878

CSS variables

:root {
  --emerald-coastline-1: #50C878;
  --emerald-coastline-2: #7BDB8F;
  --emerald-coastline-3: #B2EDC7;
  --emerald-coastline-4: #3B9F5D;
  --emerald-coastline-5: #66B27A;
}

Tailwind config

theme: {
  extend: {
    colors: {
      "emerald-coastline": {
        1: "#50C878",
        2: "#7BDB8F",
        3: "#B2EDC7",
        4: "#3B9F5D",
        5: "#66B27A",
      }
    }
  }
}

Related searches

emerald green tropical palettevibrant coastline colorslush green nature schemeenergetic natural brandingbright green web design

Palette colors

Hex values

Color 1#50C878
·
Color 2#7BDB8F
·
Color 3#B2EDC7
·
Color 4#3B9F5D
·
Color 5#66B27A
·

Accessibility

Contrast checker

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

Similar palettes

More like Emerald Coastline

View all vibrant
Coral Reef Bloom
Electric Jungle Bloom
Emerald Isle Glow
Jungle Bloom Canopy
Jungle Chroma Flare
Lush Rainforest Orchid