Palette

Sunken Garden Grotto

Cool, tranquil greens and teals of a hidden, moss-laden grotto thriving in perpetual shade.

earthcalm5 colors

More earth palettes

Preview

See it in context.

Interface

New

Ready when you are.

A quick look at how Sunken Garden Grotto 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 Sunken Garden Grotto.

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

Data visualization

#1D3B3A#4A7C75#7EB8AF#B5D9D4#E0F2F1

Palette guide

How to use Sunken Garden Grotto

Overview

The Sunken Garden Grotto color palette evokes the serene and mysterious ambiance of a hidden, moss-laden sanctuary. Dominated by cool greens and teals, this collection transitions from the deep, grounding tone of #1D3B3A to the refreshing mid-tone of #4A7C75, culminating in the airy, near-white #E0F2F1. It's a versatile palette for designers seeking to convey tranquility, natural elegance, and a sense of depth. Developers can implement these hex codes to create interfaces that feel organic and calming, ideal for wellness apps, nature-themed websites, or sophisticated branding. The balance between the rich #7EB8AF and the soft #B5D9D4 offers excellent opportunities for visual hierarchy and subtle layering, ensuring a cohesive and visually pleasing user experience. This palette is a perfect choice for projects aiming for a sophisticated yet approachable natural aesthetic.

Best used for

Wellness and spa branding
Nature-themed websites and apps
Eco-friendly product packaging
Interior design for tranquil spaces
Conservation organization branding
Yoga studio aesthetics

Suggested color roles

primary

#1D3B3A - Use as the dominant brand color or for key UI elements like navigation bars and hero sections, conveying depth and sophistication.

secondary

#4A7C75 - Ideal for supporting elements, subheadings, or secondary calls-to-action, providing a harmonious contrast to the primary.

accent

#7EB8AF - Employ sparingly for interactive elements, highlights, or subtle visual cues that need to stand out gently without disrupting tranquility.

background

#E0F2F1 - A soft, ethereal choice for main content areas or large backgrounds, ensuring readability and a sense of spaciousness.

text

#1D3B3A - Excellent for primary body text on light backgrounds like #E0F2F1, offering strong readability and maintaining the palette's natural feel.

Accessibility notes

Ensure #1D3B3A text on #E0F2F1 backgrounds meets WCAG AA standards for both large and regular text.
For interactive elements, always verify that the active states or focus indicators have sufficient contrast against their background.
Avoid using #B5D9D4 or #7EB8AF for small body text directly on #E0F2F1, as contrast may be insufficient for readability.
When pairing #4A7C75 with #E0F2F1 for text, check WCAG AA compliance, especially for body text, to ensure optimal readability.

Recommended combinations

Deep Contrast

Ideal for strong headers, primary text on light backgrounds, and clickable elements, providing clarity and visual hierarchy.

#1D3B3A · #E0F2F1 · #7EB8AF

Grotto Blend

Perfect for layered UI elements, sub-sections, or data visualizations where depth and subtle transitions are desired.

#4A7C75 · #B5D9D4 · #1D3B3A

Soft Serenity

Excellent for serene backgrounds, hover states, or secondary information, maintaining a light and airy feel.

#E0F2F1 · #B5D9D4 · #4A7C75

CSS variables

:root {
  --sunken-garden-grotto-1: #1D3B3A;
  --sunken-garden-grotto-2: #4A7C75;
  --sunken-garden-grotto-3: #7EB8AF;
  --sunken-garden-grotto-4: #B5D9D4;
  --sunken-garden-grotto-5: #E0F2F1;
}

Tailwind config

theme: {
  extend: {
    colors: {
      "sunken-garden-grotto": {
        1: "#1D3B3A",
        2: "#4A7C75",
        3: "#7EB8AF",
        4: "#B5D9D4",
        5: "#E0F2F1",
      }
    }
  }
}

Hex values

Color 1#1D3B3A

Color 2#4A7C75

Color 3#7EB8AF

Color 4#B5D9D4

Color 5#E0F2F1

Accessibility

Contrast checker

2.5:1Fail

5.4:1AA

8:1AAA

10.4:1AAA

2.5:1Fail

2.1:1Fail

3.1:1AA18

4.1:1AA18

5.4:1AA

2.1:1Fail

1.5:1Fail

1.9:1Fail

8:1AAA

3.1:1AA18

1.5:1Fail

1.3:1Fail

10.4:1AAA

4.1:1AA18

1.9:1Fail

1.3:1Fail

Similar palettes

More like Sunken Garden Grotto

Ancient Forest Hearth

Ancient Grove Calm