Palette

Regal Gemstone Cascade

Deep, lustrous greens complemented by hints of precious metals, evoking the hidden splendor of a jewel casket.

elegantelegant5 colors

More elegant palettes

Preview

See it in context.

Interface

New

Ready when you are.

A quick look at how Regal Gemstone Cascade 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 Gemstone Cascade.

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

Data visualization

#0F3A2E#2A6A5C#5CAD9E#8CE0CD#BFEEE0

Palette guide

How to use Regal Gemstone Cascade

Overview

The Regal Gemstone Cascade palette offers a sophisticated spectrum of greens, from the deep #0F3A2E to the airy #BFEEE0, with elegant mid-tones like #5CAD9E. This collection evokes the serene yet opulent beauty of precious jewels, perfect for designs that require a refined touch inspired by nature. Designers will find it excellent for wellness brands, luxury eco-conscious products, or sophisticated corporate identities. Developers can implement these greens for clean, elegant user interfaces, ensuring a calming and professional aesthetic that is both visually appealing and highly functional.

Best used for

Wellness and spa branding
Sophisticated nature-themed designs
High-end textile and fashion patterns
Environmental and sustainability initiatives
Elegant digital interfaces and websites
Luxury product packaging

Suggested color roles

primary

Use #2A6A5C as the core brand color, offering a versatile and elegant mid-tone green that is universally appealing.

secondary

Employ #0F3A2E for deep, grounding elements such as footers, navigation, or strong text contrasts.

accent

Apply #8CE0CD for bright highlights, interactive elements, or subtle graphic details to add a refreshing touch.

background

Utilize #BFEEE0 as a clean, light background, ensuring excellent readability for content while maintaining a fresh feel.

text

For most body text on light backgrounds, use #0F3A2E to provide optimal contrast and a cohesive, luxurious appearance.

Accessibility notes

Ensure #0F3A2E text on #BFEEE0 background meets WCAG AA contrast standards.
Avoid using #8CE0CD for small text on light backgrounds, as it may lack sufficient contrast.
The darker greens (#0F3A2E, #2A6A5C) pair well with white or very light text for headings on dark sections.
Test all color combinations for readability across different screen types and lighting conditions.

Recommended combinations

Deep Serenity

For a strong header, light content area, and a supportive mid-tone.

#0F3A2E · #BFEEE0 · #5CAD9E

Elegant Gradient

Ideal for layered elements or visual depth in illustrations and infographics.

#2A6A5C · #5CAD9E · #0F3A2E

Fresh Highlight

Perfect for calls to action or interactive elements that need to feel light and inviting.

#8CE0CD · #BFEEE0 · #2A6A5C

CSS variables

:root {
  --regal-gemstone-cascade-1: #0F3A2E;
  --regal-gemstone-cascade-2: #2A6A5C;
  --regal-gemstone-cascade-3: #5CAD9E;
  --regal-gemstone-cascade-4: #8CE0CD;
  --regal-gemstone-cascade-5: #BFEEE0;
}

Tailwind config

theme: {
  extend: {
    colors: {
      "regal-gemstone-cascade": {
        1: "#0F3A2E",
        2: "#2A6A5C",
        3: "#5CAD9E",
        4: "#8CE0CD",
        5: "#BFEEE0",
      }
    }
  }
}

Hex values

Color 1#0F3A2E

Color 2#2A6A5C

Color 3#5CAD9E

Color 4#8CE0CD

Color 5#BFEEE0

Accessibility

Contrast checker

2:1Fail

4.8:1AA

8.2:1AAA

9.9:1AAA

2:1Fail

2.4:1Fail

4.1:1AA18

5:1AA

4.8:1AA

2.4:1Fail

1.7:1Fail

2.1:1Fail

8.2:1AAA

4.1:1AA18

1.7:1Fail

1.2:1Fail

9.9:1AAA

5:1AA

2.1:1Fail

1.2:1Fail

Similar palettes

More like Regal Gemstone Cascade

View all elegant

Regal Brocade Essence

Art Deco Geometry

Art Nouveau Elegance

Baroque Velvet Splendor

Art Deco Gala

Art Deco Glamour