Palette

Regal Emerald Crown

Deep and luxurious greens, like the multifaceted gems adorning a royal crown, ancient and grand.

darkelegant5 colors

More dark palettes

Preview

See it in context.

Interface

New

Ready when you are.

A quick look at how Regal Emerald Crown 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 Regal Emerald Crown.

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

Data visualization

#0A3D2F#1E6C4C#3F9A68#6EC18F#9CDCA6

Palette guide

How to use Regal Emerald Crown

Overview

The Regal Emerald Crown palette exudes deep luxury, drawing inspiration from ancient, grand jewels. Its rich spectrum of greens, from the profound #0A3D2F to the vibrant #3F9A68 and the soft #9CDCA6, offers designers a sophisticated choice for projects requiring elegance and a touch of nature. Ideal for creating opulent digital interfaces, high-end branding, or serene yet luxurious print materials, this palette provides a harmonious blend of depth and lightness. Developers will find these greens versatile for UI elements, ensuring a cohesive and regal visual experience that speaks of heritage and refinement.

Best used for

Luxury brand identity
High-end interior design concepts
Nature-inspired digital experiences
Formal event invitations
Eco-friendly product packaging
Opulent website themes

Suggested color roles

primary

Use #1E6C4C as the main brand color, providing a rich, balanced green that is both elegant and approachable.

secondary

Employ #0A3D2F for deep accents, footers, or background sections that require a strong, grounding presence.

accent

Apply #6EC18F for calls to action, highlights, or illustrative details to add a refreshing pop without losing sophistication.

background

Utilize #9CDCA6 as a light, airy background for content areas, offering excellent readability and a sense of spaciousness.

text

For body text on light backgrounds, use #0A3D2F to ensure strong contrast and maintain the palette's deep, luxurious feel.

Accessibility notes

Ensure #0A3D2F text on #9CDCA6 background meets WCAG AA contrast standards.
Avoid using #6EC18F for small text on lighter greens; save it for larger headings or graphical elements.
The darkest colors like #0A3D2F provide excellent contrast for white or light-colored text.
Test color combinations for readability, especially for users with color vision deficiencies.

Recommended combinations

Deep Forest Glow

For elegant headers and subheadings on a light background, with a vibrant accent.

#0A3D2F · #9CDCA6 · #3F9A68

Verdant Harmony

A balanced trio for main content blocks, providing depth and a fresh highlight.

#1E6C4C · #6EC18F · #0A3D2F

Crown Jewel Accent

Ideal for call-to-action buttons or interactive elements that need to stand out clearly.

#3F9A68 · #9CDCA6 · #1E6C4C

CSS variables

:root {
  --regal-emerald-crown-1: #0A3D2F;
  --regal-emerald-crown-2: #1E6C4C;
  --regal-emerald-crown-3: #3F9A68;
  --regal-emerald-crown-4: #6EC18F;
  --regal-emerald-crown-5: #9CDCA6;
}

Tailwind config

theme: {
  extend: {
    colors: {
      "regal-emerald-crown": {
        1: "#0A3D2F",
        2: "#1E6C4C",
        3: "#3F9A68",
        4: "#6EC18F",
        5: "#9CDCA6",
      }
    }
  }
}

Hex values

Color 1#0A3D2F

Color 2#1E6C4C

Color 3#3F9A68

Color 4#6EC18F

Color 5#9CDCA6

Accessibility

Contrast checker

1.9:1Fail

3.5:1AA18

5.6:1AA

7.7:1AAA

1.9:1Fail

1.8:1Fail

2.9:1Fail

4:1AA18

3.5:1AA18

1.8:1Fail

1.6:1Fail

2.2:1Fail

5.6:1AA

2.9:1Fail

1.6:1Fail

1.4:1Fail

7.7:1AAA

4:1AA18

2.2:1Fail

1.4:1Fail

Similar palettes

More like Regal Emerald Crown

Emerald Gemstone Cache