Palette

Jade Empress Garden

Luxurious greens and teals reflect a vibrant, regal garden hidden in an ancient palace.

vibrantelegant5 colors

More vibrant palettes

Preview

See it in context.

Interface

New

Ready when you are.

A quick look at how Jade Empress Garden 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 Jade Empress Garden.

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

Data visualization

#006400#2E8B57#3CB371#6B8E23#7FFFD4

Palette guide

How to use Jade Empress Garden

Overview

The Jade Empress Garden palette bursts with luxurious greens and teals, reflecting a vibrant, regal garden hidden within an ancient palace. Featuring the classic forest green #006400, the balanced #2E8B57 and #3CB371, the earthy #6B8E23, and the striking #7FFFD4, this palette offers dynamic versatility. Designers and developers can utilize these hues to create opulent, sophisticated digital experiences, branding, or print materials that convey a sense of natural grandeur and lively elegance. It's particularly effective for projects aiming for a blend of botanical richness with a touch of royal splendor, from high-end lifestyle brands to intricate UI designs.

Best used for

Luxury lifestyle branding
Botanical-themed e-commerce
High-end event invitations
Museum exhibit design
Art nouveau inspired graphics
Rich UI for sophisticated apps

Suggested color roles

primary

Use #2E8B57 for main interactive elements or brand focal points, offering a balanced and inviting presence.

secondary

Apply #3CB371 for supporting content or secondary navigation, providing a refreshing and harmonious feel.

accent

Employ #7FFFD4 sparingly for luminous accents or critical calls-to-action, adding a vibrant, striking pop.

background

A rich cream or very light off-white provides a luxurious canvas, allowing the greens to truly flourish.

text

For body text, #006400 offers excellent readability and a sophisticated feel against lighter backgrounds.

Accessibility notes

Ensure #006400 text on a light background (e.g., cream) meets WCAG AA standards.
Verify contrast for #2E8B57 and #3CB371 when used as text on light backgrounds.
Avoid using #7FFFD4 for small text; reserve it for larger titles or decorative elements due to its lightness.
For interactive elements, ensure hover/focus states are clearly distinguishable and meet contrast requirements.

Recommended combinations

Royal Foliage

Ideal for sophisticated branding, providing strong depth and natural elegance.

#006400 · #2E8B57 · #3CB371

Garden Sparkle

Excellent for UI elements, bringing a vibrant, luminous feel to interactive components.

#7FFFD4 · #3CB371 · #2E8B57

Earthy Teal

Effective for dynamic infographics or sections that require a blend of earthy and vibrant tones.

#6B8E23 · #006400 · #7FFFD4

CSS variables

:root {
  --jade-empress-garden-1: #006400;
  --jade-empress-garden-2: #2E8B57;
  --jade-empress-garden-3: #3CB371;
  --jade-empress-garden-4: #6B8E23;
  --jade-empress-garden-5: #7FFFD4;
}

Tailwind config

theme: {
  extend: {
    colors: {
      "jade-empress-garden": {
        1: "#006400",
        2: "#2E8B57",
        3: "#3CB371",
        4: "#6B8E23",
        5: "#7FFFD4",
      }
    }
  }
}

Hex values

Color 1#006400

Color 2#2E8B57

Color 3#3CB371

Color 4#6B8E23

Color 5#7FFFD4

Accessibility

Contrast checker

1.8:1Fail

2.8:1Fail

2:1Fail

6.1:1AA

1.8:1Fail

1.6:1Fail

1.1:1Fail

3.5:1AA18

2.8:1Fail

1.6:1Fail

1.4:1Fail

2.2:1Fail

2:1Fail

1.1:1Fail

1.4:1Fail

3.1:1AA18

6.1:1AA

3.5:1AA18

2.2:1Fail

3.1:1AA18

Similar palettes

More like Jade Empress Garden

Emerald Gemstone Luster

Gatsby Green Glam

Malachite Veil