Palette

Cathedral Stained Glass

Deep, jewel-toned colors reminiscent of ancient cathedral stained glass windows at twilight.

darkelegant5 colors

More dark palettes

Preview

See it in context.

Interface

New

Ready when you are.

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

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

Data visualization

#000000#4B0082#DC143C#006400#FFD700

Palette guide

How to use Cathedral Stained Glass

Overview

The "Cathedral Stained Glass" palette features deep, jewel-toned colors reminiscent of ancient cathedral windows at twilight. It includes a profound black #000000, a rich dark violet #4B0082, a striking crimson red #DC143C, a deep dark green #006400, and a radiant gold #FFD700. This dramatic and elegant combination is perfect for designs that aim for sophistication, mystery, and a touch of gothic grandeur. 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

Luxury brand websites
High-end event invitations
Dark mode application themes
Art gallery digital displays
Mystical or fantasy game interfaces
Elegant editorial layouts

Suggested color roles

primary

#4B0082 (Dark Violet) - A deep, regal purple, excellent for main headings, important interactive elements, or large background sections, providing a sense of depth.

secondary

#DC143C (Crimson Red) - A rich, elegant red that adds warmth and sophistication, ideal for secondary buttons, navigation accents, or highlight details.

accent

#FFD700 (Gold) - A brilliant, luminous gold that acts as a precious highlight, perfect for small, impactful details, icons, or decorative elements.

background

#000000 (Black) - A deep, profound black, 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 #000000, #4B0082, #DC143C, and #006400. For #FFD700, use black or a very dark charcoal.

Accessibility notes

Use white or very light text on #000000, #4B0082, #DC143C, and #006400 for optimal contrast.
#FFD700 (Gold) requires dark text (black or charcoal) to meet WCAG AA standards for readability.
Avoid using #FFD700 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 Drama

For creating dramatic backgrounds, elegant headings, or striking UI elements that evoke a sense of mystery and luxury.

#000000 · #4B0082 · #DC143C

Golden Glow

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

#FFD700 · #006400 · #4B0082

Deep Forest

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

#006400 · #DC143C · #000000

CSS variables

:root {
  --cathedral-stained-glass-1: #000000;
  --cathedral-stained-glass-2: #4B0082;
  --cathedral-stained-glass-3: #DC143C;
  --cathedral-stained-glass-4: #006400;
  --cathedral-stained-glass-5: #FFD700;
}

Tailwind config

theme: {
  extend: {
    colors: {
      "cathedral-stained-glass": {
        1: "#000000",
        2: "#4B0082",
        3: "#DC143C",
        4: "#006400",
        5: "#FFD700",
      }
    }
  }
}

Hex values

Color 1#000000

Color 2#4B0082

Color 3#DC143C

Color 4#006400

Color 5#FFD700

Accessibility

Contrast checker

1.6:1Fail

4.2:1AA18

2.8:1Fail

15:1AAA

1.6:1Fail

2.6:1Fail

1.7:1Fail

9.2:1AAA

4.2:1AA18

2.6:1Fail

1.5:1Fail

3.6:1AA18