Palette

Emerald Coast Dive

Plunge into the deep, mysterious greens and blues of a hidden coastal grotto.

coolnatural5 colors

More cool palettes

Preview

See it in context.

Interface

New

Ready when you are.

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

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

Data visualization

#E8F6F1#A5E1AD#4A8C81#215E58#0F3D3C

Palette guide

How to use Emerald Coast Dive

Overview

The Emerald Coast Dive palette (ID: emerald-coast-dive) offers a serene journey into deep, mysterious greens and blues, reminiscent of a hidden coastal grotto. It features the profound #0F3D3C, the rich #215E58, and the balanced #4A8C81, transitioning to the lighter #A5E1AD and the almost-white #E8F6F1. This palette is naturally calming and sophisticated, perfect for designs that evoke tranquility, depth, and a connection to untouched natural beauty. It's an excellent choice for eco-luxury brands, wellness applications, or digital interfaces seeking a grounded, refreshing, and elegant aesthetic with a strong emphasis on organic harmony.

Best used for

Eco-luxury brand identity and packaging
Wellness and spa retreat marketing
Nature-themed websites and mobile apps
Sustainable fashion or product design
Interior design for calming spaces
Digital art with serene landscape themes

Suggested color roles

primary

Use #0F3D3C for dominant elements, headers, or backgrounds to establish depth, mystery, and a strong natural anchor.

secondary

Employ #215E58 or #4A8C81 for supporting graphics, subheadings, or interactive elements, adding rich texture.

accent

Apply #A5E1AD for subtle highlights, delicate patterns, or light interactive elements to introduce freshness.

background

Utilize #E8F6F1 for clean, airy backgrounds that allow the deeper greens to shine while maintaining a soft, inviting feel.

text

For body text, use a dark charcoal like #333333. For headlines on lighter backgrounds, #0F3D3C provides excellent readability. Use white for text on #0F3D3C.

Accessibility notes

Ensure #0F3D3C or #215E58 text on #E8F6F1 meets WCAG contrast standards.
Avoid using #A5E1AD for small text on light backgrounds; it's best for large headlines or accents.
The lighter green #A5E1AD and #E8F6F1 may have low contrast when used together; separate them.
Pair #0F3D3C with #E8F6F1 for a high-contrast, accessible combination for primary content.

Recommended combinations

Grotto Depths

Ideal for creating a profound, mysterious feel in branding, website hero sections, or illustrations with organic textures.

#0F3D3C · #215E58 · #4A8C81

Coastal Breeze

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

#A5E1AD · #E8F6F1 · #4A8C81

Natural Contrast

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

#0F3D3C · #E8F6F1 · #A5E1AD

CSS variables

:root {
  --emerald-coast-dive-1: #E8F6F1;
  --emerald-coast-dive-2: #A5E1AD;
  --emerald-coast-dive-3: #4A8C81;
  --emerald-coast-dive-4: #215E58;
  --emerald-coast-dive-5: #0F3D3C;
}

Tailwind config

theme: {
  extend: {
    colors: {
      "emerald-coast-dive": {
        1: "#E8F6F1",
        2: "#A5E1AD",
        3: "#4A8C81",
        4: "#215E58",
        5: "#0F3D3C",
      }
    }
  }
}

Hex values

Color 1#E8F6F1

Color 2#A5E1AD

Color 3#4A8C81

Color 4#215E58

Color 5#0F3D3C

Accessibility

Contrast checker

1.4:1Fail

3.5:1AA18

6.7:1AA

10.8:1AAA

1.4:1Fail

2.6:1Fail

5:1AA

8:1AAA

3.5:1AA18

2.6:1Fail

1.9:1Fail

3.1:1AA18

6.7:1AA

5:1AA

1.9:1Fail

1.6:1Fail

10.8:1AAA

8:1AAA

3.1:1AA18

1.6:1Fail

Similar palettes

More like Emerald Coast Dive

View all cool

Lapis Tidepool

Celestial Ocean Mirror

Deep Marine Verdure

Emerald Coast Sparkle

Ocean Salt Spray

Tidal Pool Emeralds