Palette

Cathedral Stained Glass

A dramatic and regal palette drawing inspiration from the deep, jewel-toned windows of ancient cathedrals.

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

#2F2F4F#483D8B#6A5ACD#7B68EE#B0E0E6

Palette guide

How to use Cathedral Stained Glass

Overview

The "Cathedral Stained Glass" palette presents a dramatic and regal array, drawing inspiration from the deep, jewel-toned windows of ancient cathedrals. It features a very dark indigo #2F2F4F, a rich dark slate blue #483D8B, a vibrant medium slate blue #6A5ACD, a luminous medium orchid #7B68EE, and a light powder blue #B0E0E6. This sophisticated and enchanting combination is perfect for designs that aim for elegance, mystery, and a touch of historical 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

High-end luxury branding
Elegant website backgrounds
Dark mode application themes
Fantasy novel covers
Jewelry store marketing
Artistic digital illustrations

Suggested color roles

primary

#483D8B (Dark Slate Blue) - A deep, regal blue, excellent for main headings, important interactive elements, or large background sections, providing a sense of depth.

secondary

#6A5ACD (Medium Slate Blue) - A vibrant, elegant blue that adds sophistication, ideal for secondary buttons, navigation accents, or highlight details.

accent

#7B68EE (Medium Orchid) - A luminous, energetic purple that acts as a captivating highlight, perfect for small, impactful details, icons, or decorative elements.

background

#2F2F4F (Very Dark Indigo) - A deep, profound indigo, 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 #2F2F4F, #483D8B, #6A5ACD, and #7B68EE. On #B0E0E6 (Light Powder Blue), a dark charcoal or black is preferred.

Accessibility notes

Use white or very light text on #2F2F4F, #483D8B, #6A5ACD, and #7B68EE for optimal contrast.
#B0E0E6 (Light Powder Blue) requires dark text (black or charcoal) to meet WCAG AA standards for readability.
Avoid using #7B68EE for small text against very light backgrounds.
Ensure sufficient contrast for all text and interactive elements, especially given the dark background emphasis.

Recommended combinations

Deep Stained Glass

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

#2F2F4F · #483D8B · #6A5ACD

Violet Glow

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

#7B68EE · #B0E0E6 · #483D8B

Regal Blue

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

#6A5ACD · #2F2F4F · #B0E0E6

CSS variables

:root {
  --cathedral-stained-glass-2-1: #2F2F4F;
  --cathedral-stained-glass-2-2: #483D8B;
  --cathedral-stained-glass-2-3: #6A5ACD;
  --cathedral-stained-glass-2-4: #7B68EE;
  --cathedral-stained-glass-2-5: #B0E0E6;
}

Tailwind config

theme: {
  extend: {
    colors: {
      "cathedral-stained-glass-2": {
        1: "#2F2F4F",
        2: "#483D8B",
        3: "#6A5ACD",
        4: "#7B68EE",
        5: "#B0E0E6",
      }
    }
  }
}

Hex values

Color 1#2F2F4F

Color 2#483D8B

Color 3#6A5ACD

Color 4#7B68EE

Color 5#B0E0E6

Accessibility

Contrast checker

1.4:1Fail

2.4:1Fail

3.1:1AA18

8.9:1AAA

1.4:1Fail

1.7:1Fail

2.2:1Fail

6.3:1AA

2.4:1Fail

1.7:1Fail

1.3:1Fail

3.7:1AA18

3.1:1AA18

2.2:1Fail

1.3:1Fail

2.9:1Fail

8.9:1AAA

6.3:1AA

3.7:1AA18

2.9:1Fail

Similar palettes

More like Cathedral Stained Glass

Midnight Library Velvet

Blackberry Bramble Luxe