Back to palettes

Palette

Emerald Lagoon Gleam

Reflects the deep, jewel-toned greens and sparkling surface of a hidden, tranquil emerald lagoon.

coolcalm5 colors
More cool palettes

Preview

See it in context.

Interface

New

Ready when you are.

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

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

Data visualization

#0A3C2B#1B6A4B#2E8E6A#4CB48C#6ACDAA

Palette guide

How to use Emerald Lagoon Gleam

Overview

The Emerald Lagoon Gleam palette reflects the deep, jewel-toned greens and sparkling surface of a hidden, tranquil lagoon. Ranging from the profound depth of #0A3C2B and #1B6A4B to the balanced #2E8E6A, and culminating in the refreshing #4CB48C and #6ACDAA, this collection is designed to evoke serenity, natural beauty, and a touch of understated luxury. It’s an ideal choice for projects seeking to convey calm, environmental consciousness, or elegant simplicity. Perfect for wellness brands, eco-friendly products, or any digital interface that benefits from a clean, harmonious, and tranquil aesthetic. The gradient provides excellent visual flow and depth.

Best used for

  • Luxury eco-resort branding
  • Meditation and mindfulness apps
  • Botanical skincare product packaging
  • Nature photography websites
  • Sustainable fashion brands
  • Yoga studio or spa marketing

Suggested color roles

primary

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

secondary

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

accent

Apply #4CB48C as a refreshing, subtle accent for interactive elements or gentle highlights.

background

Utilize #6ACDAA as a light, airy background for clean content areas, providing a calm and clear base.

text

Pair #0A3C2B with light backgrounds for strong contrast, or use white/light gray on darker backgrounds.

Accessibility notes

  • #6ACDAA may require darker text (e.g., #0A3C2B or black) to ensure readability against lighter backgrounds.
  • Pair #0A3C2B or #1B6A4B with white or off-white text for optimal legibility on dark backgrounds.
  • Avoid using #2E8E6A directly on #4CB48C for small text due to potential low contrast.
  • Always verify WCAG AA contrast standards for all text and background combinations.

Recommended combinations

Lagoon Depths

Creates a strong, immersive foundation for primary branding or elegant dark mode interfaces.

#0A3C2B · #1B6A4B · #2E8E6A

Gleaming Surface

Ideal for clean, inviting layouts with light backgrounds and clear, readable text.

#6ACDAA · #4CB48C · #0A3C2B

Tranquil Flow

Suitable for interactive elements, progress indicators, or subtle informational displays.

#2E8E6A · #4CB48C · #1B6A4B

CSS variables

:root {
  --emerald-lagoon-gleam-1: #0A3C2B;
  --emerald-lagoon-gleam-2: #1B6A4B;
  --emerald-lagoon-gleam-3: #2E8E6A;
  --emerald-lagoon-gleam-4: #4CB48C;
  --emerald-lagoon-gleam-5: #6ACDAA;
}

Tailwind config

theme: {
  extend: {
    colors: {
      "emerald-lagoon-gleam": {
        1: "#0A3C2B",
        2: "#1B6A4B",
        3: "#2E8E6A",
        4: "#4CB48C",
        5: "#6ACDAA",
      }
    }
  }
}

Related searches

emerald lagoon colorstranquil green palettejewel tone nature schemecalm eco brandingserene green UI design

Palette colors

Hex values

Color 1#0A3C2B
·
Color 2#1B6A4B
·
Color 3#2E8E6A
·
Color 4#4CB48C
·
Color 5#6ACDAA
·

Accessibility

Contrast checker

1
2
3
4
5
1
1.9:1Fail
3.1:1AA18
4.8:1AA
6.4:1AA
2
1.9:1Fail
1.6:1Fail
2.6:1Fail
3.4:1AA18
3
3.1:1AA18
1.6:1Fail
1.6:1Fail
2.1:1Fail
4
4.8:1AA
2.6:1Fail
1.6:1Fail
1.3:1Fail
5
6.4:1AA
3.4:1AA18
2.1:1Fail
1.3:1Fail

Similar palettes

More like Emerald Lagoon Gleam

View all cool
Serene Lagoon Depth
Hidden Cove Shimmer
Teal Sanctuary
Alpine Lake Serene
Aquatic Moss Garden
Azure Lagoon Drift