Palette

Emerald Grotto Shine

Brilliant emeralds and deep jades shine, recreating the radiant, otherworldly glow of a hidden, verdant grotto.

vibrantenergetic5 colors

More vibrant palettes

Preview

See it in context.

Interface

New

Ready when you are.

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

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

Data visualization

#1F7A4A#3FB37A#7AE0B3#155C3A#0F452A

Palette guide

How to use Emerald Grotto Shine

Overview

The Emerald Grotto Shine palette radiates with brilliant emeralds and deep jades, capturing the otherworldly glow of a hidden, verdant grotto. From the profound depth of #0F452A and #155C3A to the vibrant #1F7A4A and the luminous #3FB37A, with the sparkling #7AE0B3 as a highlight, this collection is designed to energize and captivate. It's an excellent choice for projects seeking to convey vitality, luxury, and a touch of magical realism. Ideal for vibrant branding, dynamic digital interfaces, or any design that benefits from a rich, glowing green aesthetic. The palette offers both grounding darks and brilliant lights for compelling visual hierarchy.

Best used for

Fantasy game interfaces
Luxury event branding
Eco-friendly product packaging (vibrant)
Jewelry and fashion design
Nature-themed digital art
Creative agency websites

Suggested color roles

primary

Use #0F452A as the deepest, most grounding color for main branding, headers, or dark mode.

secondary

Employ #155C3A as a supportive dark green for subheadings, important text, or secondary UI elements.

accent

Apply #7AE0B3 as a bright, luminous highlight for calls-to-action, key information, or interactive elements.

background

Utilize #3FB37A as a vibrant, yet balanced background for content areas, providing energy and clarity.

text

Pair #0F452A with lighter greens or white for excellent contrast, or use white/light gray on darker greens.

Accessibility notes

#7AE0B3 will require very dark text (e.g., #0F452A or black) to ensure readability on light backgrounds.
Ensure sufficient contrast when using #3FB37A as a background for text, especially for smaller fonts.
Avoid using #1F7A4A and #3FB37A for small text on each other due to potentially low contrast.
Always verify WCAG AA contrast standards for all text and background combinations, especially with bright accents.

Recommended combinations

Grotto Core

Creates a robust, deep foundation for primary branding or elegant dark themes.

#0F452A · #155C3A · #1F7A4A

Radiant Glow

Ideal for eye-catching calls-to-action, banners, or highlighting key features.

#7AE0B3 · #3FB37A · #0F452A

Verdant Path

Suitable for navigation elements or progress indicators, offering clarity and vitality.

#1F7A4A · #3FB37A · #155C3A

CSS variables

:root {
  --emerald-grotto-shine-1: #1F7A4A;
  --emerald-grotto-shine-2: #3FB37A;
  --emerald-grotto-shine-3: #7AE0B3;
  --emerald-grotto-shine-4: #155C3A;
  --emerald-grotto-shine-5: #0F452A;
}

Tailwind config

theme: {
  extend: {
    colors: {
      "emerald-grotto-shine": {
        1: "#1F7A4A",
        2: "#3FB37A",
        3: "#7AE0B3",
        4: "#155C3A",
        5: "#0F452A",
      }
    }
  }
}

Hex values

Color 1#1F7A4A

Color 2#3FB37A

Color 3#7AE0B3

Color 4#155C3A

Color 5#0F452A

Accessibility

Contrast checker

2:1Fail

3.3:1AA18

1.5:1Fail

2.1:1Fail

2:1Fail

1.7:1Fail

3:1AA18

4.2:1AA18

3.3:1AA18

1.7:1Fail

5:1AA

6.9:1AA