Palette

Emerald Isle

Captures the lush, verdant beauty and ancient charm of a mystical, green island landscape.

earthnatural5 colors

More earth palettes

Preview

See it in context.

Interface

New

Ready when you are.

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

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

Data visualization

#014421#34623F#007B7B#778899#C5B358

Palette guide

How to use Emerald Isle

Overview

The Emerald Isle palette captures the lush, ancient charm of a mystical green island, blending deep forest greens with unexpected earthy and metallic accents. Featuring a profound #014421 and #34623F, it introduces a striking teal #007B7B, a sophisticated slate gray #778899, and a touch of golden warmth with #C5B358. This unique collection is perfect for designs seeking to convey heritage, natural beauty, and a hint of aged elegance. Ideal for artisanal brands, historical projects, or any design that benefits from a rich, evocative, and slightly unconventional color story. The diverse tones allow for complex visual narratives and memorable brand identities.

Best used for

Artisanal craft breweries
Historical preservation societies
Celtic-inspired jewelry brands
Luxury travel agencies (unique destinations)
Earthy, sophisticated interior design
Folklore and storytelling platforms

Suggested color roles

primary

Use #014421 as the deepest, most stable color for main headers, branding, or strong UI elements.

secondary

Employ #34623F as a supportive deep green for subheadings, important text, or active states.

accent

Apply #C5B358 as an unexpected golden accent for calls-to-action, highlights, or key features.

background

Utilize #778899 as a muted, sophisticated gray for content areas, providing calm and contrast.

text

Pair #014421 with light backgrounds (like #778899 or white) for excellent contrast, or use white/light gray on darker backgrounds.

Accessibility notes

Ensure #778899 has sufficient contrast with very light text; use darker text (e.g., #014421 or black) for readability.
Pair #014421 or #007B7B with white or off-white text for optimal legibility on dark backgrounds.
Be cautious using #C5B358 for small text on #778899 due to potential low contrast; check WCAG AA.
Always verify WCAG AA contrast standards for all text and background combinations.

Recommended combinations

Ancient Roots

Creates a grounded, timeless feel for primary branding and sophisticated interfaces.

#014421 · #34623F · #778899

Hidden Gem

Ideal for eye-catching accents and highlights against a deep, mysterious background.

#C5B358 · #007B7B · #014421

Misty Morning

Suitable for content sections, providing a calm backdrop with clear, engaging elements.

#778899 · #34623F · #007B7B

CSS variables

:root {
  --emerald-isle-1: #014421;
  --emerald-isle-2: #34623F;
  --emerald-isle-3: #007B7B;
  --emerald-isle-4: #778899;
  --emerald-isle-5: #C5B358;
}

Tailwind config

theme: {
  extend: {
    colors: {
      "emerald-isle": {
        1: "#014421",
        2: "#34623F",
        3: "#007B7B",
        4: "#778899",
        5: "#C5B358",
      }
    }
  }
}

Hex values

Color 1#014421

Color 2#34623F

Color 3#007B7B

Color 4#778899

Color 5#C5B358

Accessibility

Contrast checker

1.6:1Fail

2.2:1Fail

3.1:1AA18

5.4:1AA

1.6:1Fail

1.4:1Fail

1.9:1Fail

3.4:1AA18

2.2:1Fail

1.4:1Fail

2.4:1Fail

3.1:1AA18

1.9:1Fail

1.4:1Fail

1.7:1Fail

5.4:1AA

3.4:1AA18

2.4:1Fail

1.7:1Fail

Similar palettes

More like Emerald Isle

Emerald Isle

See it in context.

Ready when you are.

Built with Emerald Isle.

How to use Emerald Isle

Overview

Best used for

Suggested color roles

Accessibility notes

Recommended combinations

Ancient Roots

Hidden Gem

Misty Morning

CSS variables

Tailwind config

Related searches

Hex values

Contrast checker

More like Emerald Isle