Palette

Cathedral Glass Shadow

Rich, deep jewel tones that capture the solemn grandeur and intricate beauty of gothic stained glass.

darkelegant5 colors

More dark palettes

Preview

See it in context.

Interface

New

Ready when you are.

A quick look at how Cathedral Glass Shadow 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 Cathedral Glass Shadow.

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

Data visualization

#2C0F2B#5E1A4F#8F296D#E04D79#A38C8D

Palette guide

How to use Cathedral Glass Shadow

Overview

The "Cathedral Glass Shadow" palette features rich, deep jewel tones that capture the solemn grandeur and intricate beauty of gothic stained glass. It includes a very dark plum #2C0F2B, a deep magenta-purple #5E1A4F, a vibrant rose-purple #8F296D, a striking bright rose #E04D79, and a muted rose-gray #A38C8D. This dramatic and elegant combination is perfect for designs that aim for sophistication, mystery, and a touch of historical artistry. Designers can leverage these hex codes for luxury branding, dark mode interfaces, or artistic digital installations. Developers will find this palette ideal for applications requiring a rich, immersive, and visually captivating user experience.

Best used for

High-end fashion branding
Artistic photography portfolios
Elegant dark mode themes
Luxury product packaging
Themed event invitations
Digital art and illustration

Suggested color roles

primary

#5E1A4F (Deep Magenta-Purple) - A rich, commanding purple, excellent for main headings, important interactive elements, or large background sections, providing a sense of depth and elegance.

secondary

#8F296D (Vibrant Rose-Purple) - A striking, vibrant pink-purple that adds energy and sophistication, ideal for secondary buttons, navigation accents, or highlight details.

accent

#E04D79 (Bright Rose) - A luminous, energetic pink that acts as a captivating highlight, perfect for small, impactful details, icons, or decorative elements.

background

#2C0F2B (Very Dark Plum) - A deep, profound plum, providing an excellent dramatic canvas for content, making the jewel tones truly shine.

text

Pure white or a very light gray like #F0F0F0 is highly recommended for text against #2C0F2B, #5E1A4F, #8F296D, and #E04D79. On #A38C8D (Muted Rose-Gray), a dark charcoal or black is preferred.

Accessibility notes

Use white or very light text on #2C0F2B, #5E1A4F, #8F296D, and #E04D79 for optimal contrast.
#A38C8D (Muted Rose-Gray) requires dark text (black or charcoal) to meet WCAG AA standards for readability.
Avoid using #E04D79 for small text against light backgrounds.
Ensure sufficient contrast for all text and interactive elements, especially given the dark background emphasis.

Recommended combinations

Jewel Tone Depth

For creating rich, immersive backgrounds, elegant headings, or sophisticated UI elements that evoke a sense of luxury.

#2C0F2B · #5E1A4F · #8F296D

Rose Glow

Ideal for highlighting key information, interactive elements, or adding a touch of vibrant contrast to darker compositions.

#E04D79 · #A38C8D · #5E1A4F

Shadowed Elegance

Excellent for showcasing distinct content sections, historical details, or creating graphic patterns with a solemn, grounded elegance.

#8F296D · #2C0F2B · #A38C8D

CSS variables

:root {
  --cathedral-glass-shadow-1: #2C0F2B;
  --cathedral-glass-shadow-2: #5E1A4F;
  --cathedral-glass-shadow-3: #8F296D;
  --cathedral-glass-shadow-4: #E04D79;
  --cathedral-glass-shadow-5: #A38C8D;
}

Tailwind config

theme: {
  extend: {
    colors: {
      "cathedral-glass-shadow": {
        1: "#2C0F2B",
        2: "#5E1A4F",
        3: "#8F296D",
        4: "#E04D79",
        5: "#A38C8D",
      }
    }
  }
}

Hex values

Color 1#2C0F2B

Color 2#5E1A4F

Color 3#8F296D

Color 4#E04D79

Color 5#A38C8D

Accessibility

Contrast checker

1.4:1Fail

2.2:1Fail

4.6:1AA

5.5:1AA

1.4:1Fail

1.6:1Fail

3.2:1AA18

3.9:1AA18

2.2:1Fail

1.6:1Fail

2:1Fail

2.5:1Fail