Palette

Emerald Coast

Fresh and serene greens that evoke the natural beauty of a rugged, verdant coastline meeting the sea.

coolcalm5 colors

More cool palettes

Preview

See it in context.

Interface

New

Ready when you are.

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

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

Data visualization

#2E8B57#3CB371#66CDAA#8FBC8F#006400

Palette guide

How to use Emerald Coast

Overview

The Emerald Coast palette offers a fresh and serene collection of greens, evoking the natural beauty of a rugged, verdant coastline meeting the sea. It features the deep #006400, the robust #2E8B57, and the lively #3CB371, transitioning to the softer #66CDAA and the tranquil #8FBC8F. This palette is inherently calming and organic, perfect for designs that aim to convey peace, natural beauty, and a grounded connection to the environment. It's an excellent choice for eco-conscious brands, outdoor living applications, or digital interfaces seeking a refreshing, serene, and harmonious aesthetic with a strong emphasis on lush greenery.

Best used for

Eco-friendly and sustainable branding
Outdoor adventure and nature tourism marketing
Wellness and mindful living apps
Landscape photography portfolios
Interior design for natural, calming environments
Digital art with serene coastal or forest themes

Suggested color roles

primary

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

secondary

Employ #2E8B57 or #3CB371 for supporting graphics, subheadings, or interactive elements, adding vibrancy and texture.

accent

Apply #8FBC8F for subtle highlights, delicate patterns, or light interactive elements to introduce softness and freshness.

background

Utilize #8FBC8F for clean, airy backgrounds that allow the deeper greens to shine while maintaining a natural feel.

text

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

Accessibility notes

Ensure #006400 or #2E8B57 text on #8FBC8F meets WCAG contrast standards.
Avoid using #8FBC8F for small text on light backgrounds; it's best for large headlines or accents.
The lighter greens #66CDAA and #8FBC8F may have low contrast when used together; separate them.
Pair #006400 with #8FBC8F for a high-contrast, accessible combination for primary content.

Recommended combinations

Forest & Sea

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

#006400 · #2E8B57 · #3CB371

Coastal Calm

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

#66CDAA · #8FBC8F · #3CB371

Natural Harmony

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

#006400 · #8FBC8F · #2E8B57

CSS variables

:root {
  --emerald-coast-1: #2E8B57;
  --emerald-coast-2: #3CB371;
  --emerald-coast-3: #66CDAA;
  --emerald-coast-4: #8FBC8F;
  --emerald-coast-5: #006400;
}

Tailwind config

theme: {
  extend: {
    colors: {
      "emerald-coast": {
        1: "#2E8B57",
        2: "#3CB371",
        3: "#66CDAA",
        4: "#8FBC8F",
        5: "#006400",
      }
    }
  }
}

Hex values

Color 1#2E8B57

Color 2#3CB371

Color 3#66CDAA

Color 4#8FBC8F

Color 5#006400

Accessibility

Contrast checker

1.6:1Fail

2.2:1Fail

2:1Fail

1.8:1Fail

1.6:1Fail

1.4:1Fail

1.2:1Fail

2.8:1Fail

2.2:1Fail

1.4:1Fail

1.1:1Fail

3.9:1AA18

2:1Fail

1.2:1Fail

1.1:1Fail

3.5:1AA18

1.8:1Fail

2.8:1Fail

3.9:1AA18

3.5:1AA18

Similar palettes

More like Emerald Coast

View all cool

Aegean Coast Serenity

Aquatic Moss Garden

Azure Lagoon Drift

Cerulean Coastline Calm

Coastal Seafoam Whisper

Coastal Seaglass Gems