Palette

Emerald Grotto Depths

Plunges into the mysterious, shimmering depths of a hidden emerald grotto, cool and ethereal.

coolcalm5 colors

More cool palettes

Preview

See it in context.

Interface

New

Ready when you are.

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

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

Data visualization

#0A2E2A#1C4D4A#3B7A7A#67B6B6#B4E0E0

Palette guide

How to use Emerald Grotto Depths

Overview

The Emerald Grotto Depths palette offers a serene and ethereal journey into cool, muted teal-greens, reflecting the quiet beauty of a hidden underwater world. Starting with the profound darkness of #0A2E2A and #1C4D4A, it gradually lightens through the balanced #3B7A7A and the airy #67B6B6, culminating in the near-white #B4E0E0. This sophisticated gradient is perfect for designs that require a calming, clean, and modern aesthetic. It excels in creating tranquil digital experiences, minimalist branding, or any project aiming to evoke serenity, clarity, and a subtle connection to deep, cool waters. The range provides excellent versatility for visual hierarchy.

Best used for

Minimalist web design
Luxury spa and wellness branding
Meditation and mindfulness apps
Architectural and interior design presentations
Eco-friendly product packaging
Scientific data visualization (calm, precise)

Suggested color roles

primary

Use #0A2E2A as the deepest shade, ideal for strong branding, headers, or dark mode backgrounds.

secondary

Employ #1C4D4A as a supportive dark tone for subheadings, important text, or secondary UI elements.

accent

Apply #67B6B6 as a refreshing, subtle accent for interactive elements or gentle highlights.

background

Utilize #B4E0E0 as a very light, airy background for clean content areas, providing a serene canvas.

text

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

Accessibility notes

#B4E0E0 should only be used as a background for dark text (e.g., #0A2E2A or black) to ensure readability.
Ensure sufficient contrast when using #67B6B6 for text, especially on other light backgrounds.
Pair #0A2E2A or #1C4D4A with white or very light gray text for optimal legibility on dark backgrounds.
Always verify text contrast ratios for WCAG AA compliance across all combinations.

Recommended combinations

Deep Serenity

Creates a grounding, sophisticated feel for main sections or elegant interfaces.

#0A2E2A · #1C4D4A · #3B7A7A

Clear Horizon

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

#B4E0E0 · #67B6B6 · #0A2E2A

Subtle Interaction

Perfect for buttons, links, or progress indicators that need a calm, inviting presence.

#3B7A7A · #67B6B6 · #1C4D4A

CSS variables

:root {
  --emerald-grotto-depths-1: #0A2E2A;
  --emerald-grotto-depths-2: #1C4D4A;
  --emerald-grotto-depths-3: #3B7A7A;
  --emerald-grotto-depths-4: #67B6B6;
  --emerald-grotto-depths-5: #B4E0E0;
}

Tailwind config

theme: {
  extend: {
    colors: {
      "emerald-grotto-depths": {
        1: "#0A2E2A",
        2: "#1C4D4A",
        3: "#3B7A7A",
        4: "#67B6B6",
        5: "#B4E0E0",
      }
    }
  }
}

Hex values

Color 1#0A2E2A

Color 2#1C4D4A

Color 3#3B7A7A

Color 4#67B6B6

Color 5#B4E0E0

Accessibility

Contrast checker

1.5:1Fail

3:1Fail

6.2:1AA

10.2:1AAA

1.5:1Fail

1.9:1Fail

4:1AA18

6.6:1AA

3:1Fail

1.9:1Fail

2.1:1Fail

3.5:1AA18

6.2:1AA

4:1AA18

2.1:1Fail

1.6:1Fail

10.2:1AAA

6.6:1AA

3.5:1AA18

1.6:1Fail

Similar palettes

More like Emerald Grotto Depths

View all cool

Abyssal Current Glide

Sapphire Reef Light

Celestial Ocean Embrace

Cobalt Ocean Depths

Cobalt Tidepool

Deep Kelp Forest