Palette

Emerald Gemstone Cache

A luxurious range of deep and vibrant greens, evoking the precious sparkle of hidden emeralds.

darkelegant5 colors

More dark palettes

Preview

See it in context.

Interface

New

Ready when you are.

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

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

Data visualization

#0F3A2F#2A614E#4A9C77#7AD6A2#A8F0C6

Palette guide

How to use Emerald Gemstone Cache

Overview

The Emerald Gemstone Cache palette offers a luxurious range of deep and vibrant greens, evoking the precious sparkle of hidden emeralds. It features the profound #0F3A2F, the rich #2A614E, and the balanced #4A9C77, transitioning to the lively #7AD6A2 and the radiant #A8F0C6. This palette is exceptionally elegant and dynamic, perfect for designs that aim to convey sophistication, luxury, and a touch of preciousness. It's an excellent choice for high-end branding, jewelry marketing, or digital interfaces seeking a refined, opulent, and harmonious aesthetic with a strong emphasis on shimmering emerald tones.

Best used for

Luxury brand identity and packaging
Jewelry marketing and e-commerce websites
High-end fashion editorial design
Event branding for galas or upscale parties
Digital art with gemstone or fantasy themes
Interactive web experiences with a premium feel

Suggested color roles

primary

Use #0F3A2F for dominant elements, headers, or backgrounds to establish depth, luxury, and a strong foundation.

secondary

Employ #2A614E or #4A9C77 for supporting graphics, subheadings, or interactive elements, adding richness and texture.

accent

Apply #A8F0C6 for subtle highlights, delicate patterns, or ethereal background accents to introduce lightness and sparkle.

background

Utilize #A8F0C6 for clean, airy backgrounds that allow the deeper greens to shine while maintaining a soft, inviting feel.

text

For body text, use a dark charcoal like #333333. For headlines on lighter backgrounds, #0F3A2F provides excellent readability. Use white for text on #0F3A2F.

Accessibility notes

Ensure #0F3A2F or #2A614E text on #A8F0C6 meets WCAG contrast standards.
Avoid using #A8F0C6 for small text on light backgrounds; it's best for large headlines or accents.
The lighter greens #7AD6A2 and #A8F0C6 may have low contrast when used together; separate them.
Pair #0F3A2F with #A8F0C6 for a high-contrast, accessible combination for primary content.

Recommended combinations

Deep Jewels

Ideal for creating a profound, luxurious feel in branding, website hero sections, or illustrations with gemstone textures.

#0F3A2F · #2A614E · #4A9C77

Glimmering Cache

Perfect for light UI elements, background gradients, or decorative patterns that need to convey freshness and sparkle.

#4A9C77 · #7AD6A2 · #A8F0C6

Opulent Contrast

Use for impactful call-to-action buttons, key highlights, or sections that require a bold yet elegantly inviting visual statement.

#0F3A2F · #A8F0C6 · #7AD6A2

CSS variables

:root {
  --emerald-gemstone-cache-1: #0F3A2F;
  --emerald-gemstone-cache-2: #2A614E;
  --emerald-gemstone-cache-3: #4A9C77;
  --emerald-gemstone-cache-4: #7AD6A2;
  --emerald-gemstone-cache-5: #A8F0C6;
}

Tailwind config

theme: {
  extend: {
    colors: {
      "emerald-gemstone-cache": {
        1: "#0F3A2F",
        2: "#2A614E",
        3: "#4A9C77",
        4: "#7AD6A2",
        5: "#A8F0C6",
      }
    }
  }
}

Hex values

Color 1#0F3A2F

Color 2#2A614E

Color 3#4A9C77

Color 4#7AD6A2

Color 5#A8F0C6

Accessibility

Contrast checker

1.8:1Fail

3.8:1AA18

7.2:1AAA

9.6:1AAA

1.8:1Fail

2.2:1Fail

4.1:1AA18

5.5:1AA

3.8:1AA18

2.2:1Fail

1.9:1Fail

2.5:1Fail

7.2:1AAA

4.1:1AA18

1.9:1Fail

1.3:1Fail

9.6:1AAA

5.5:1AA

2.5:1Fail

1.3:1Fail

Similar palettes

More like Emerald Gemstone Cache

Gothic Cathedral Window