Palette

Emerald Coastline Bloom

A refreshing blend of deep greens and bright aquamarines, like a vibrant coastline meeting the sea.

coolnatural5 colors

More cool palettes

Preview

See it in context.

Interface

New

Ready when you are.

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

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

Data visualization

#2B574C#4E8B7F#7BD4C6#A6F5E3#1D3A32

Palette guide

How to use Emerald Coastline Bloom

Overview

The Emerald Coastline Bloom palette is a refreshing blend of deep greens and bright aquamarines, akin to a vibrant coastline meeting the sea. It features the profound #1D3A32, the rich #2B574C, and the balanced #4E8B7F, transitioning to the lively #7BD4C6 and the ethereal #A6F5E3. This palette is dynamically cool and inviting, perfect for designs that aim to convey freshness, natural beauty, and a modern connection to marine environments. It's an excellent choice for eco-conscious brands, travel destinations, or digital interfaces seeking a clean, invigorating, and harmonious aesthetic with a strong emphasis on aquatic and lush tones.

Best used for

Coastal resort and travel branding
Eco-tourism and marine life conservation
Wellness and spa-related web design
Sustainable product packaging
Digital art with ocean or tropical themes
Summer fashion and beauty campaigns

Suggested color roles

primary

Use #1D3A32 for dominant elements, headers, or backgrounds to establish depth, stability, and a strong natural foundation.

secondary

Employ #2B574C or #4E8B7F for supporting graphics, subheadings, or interactive elements, adding richness and texture.

accent

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

background

Utilize #A6F5E3 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, #1D3A32 provides excellent readability. Use white for text on #1D3A32.

Accessibility notes

Ensure #1D3A32 or #2B574C text on #A6F5E3 meets WCAG contrast standards.
Avoid using #A6F5E3 for small text on light backgrounds; it's best for large headlines or accents.
The lighter aquas #7BD4C6 and #A6F5E3 may have low contrast when used together; separate them.
Pair #1D3A32 with #A6F5E3 for a high-contrast, accessible combination for primary content.

Recommended combinations

Deep Lagoon

Ideal for creating a profound, immersive feel in branding, website hero sections, or marine-themed illustrations.

#1D3A32 · #2B574C · #4E8B7F

Aqua Bloom

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

#7BD4C6 · #A6F5E3 · #4E8B7F

Coastal Harmony

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

#1D3A32 · #A6F5E3 · #7BD4C6

CSS variables

:root {
  --emerald-coastline-bloom-1: #2B574C;
  --emerald-coastline-bloom-2: #4E8B7F;
  --emerald-coastline-bloom-3: #7BD4C6;
  --emerald-coastline-bloom-4: #A6F5E3;
  --emerald-coastline-bloom-5: #1D3A32;
}

Tailwind config

theme: {
  extend: {
    colors: {
      "emerald-coastline-bloom": {
        1: "#2B574C",
        2: "#4E8B7F",
        3: "#7BD4C6",
        4: "#A6F5E3",
        5: "#1D3A32",
      }
    }
  }
}

Hex values

Color 1#2B574C

Color 2#4E8B7F

Color 3#7BD4C6

Color 4#A6F5E3

Color 5#1D3A32

Accessibility

Contrast checker

2.1:1Fail

4.7:1AA

6.5:1AA

1.5:1Fail

2.1:1Fail

2.3:1Fail

3.2:1AA18

3.1:1AA18

4.7:1AA

2.3:1Fail

1.4:1Fail

7.1:1AAA

6.5:1AA

3.2:1AA18

1.4:1Fail

9.9:1AAA

1.5:1Fail

3.1:1AA18

7.1:1AAA

9.9:1AAA

Similar palettes

More like Emerald Coastline Bloom

View all cool

Deep Sea Coral

Emerald Coast Sparkle

Tropical Forest Canopy

Azure Coast Relic

Azure Coastline

Coastal Rockpool