Back to palettes

Palette

Gothic Stained Glass

Deep jewel tones—ruby, sapphire, emerald—shimmering within dark lines, like an ancient church window.

darkelegant5 colors
More dark palettes

Preview

See it in context.

Interface

New

Ready when you are.

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

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

Data visualization

#2A0A2E#5C0B66#9C1FAD#2B7A00#FF006E

Palette guide

How to use Gothic Stained Glass

Overview

The Gothic Stained Glass palette features deep jewel tones—ruby, sapphire, emerald—shimmering within dark lines, like an ancient church window. This elegant collection includes a profound purple-black #2A0A2E, rich purples #5C0B66 and #9C1FAD, a vibrant emerald green #2B7A00, and a striking ruby magenta #FF006E. It's ideal for designers seeking a luxurious, dramatic, and visually opulent aesthetic. The palette offers a powerful balance between deep, foundational colors and striking, jewel-like accents, perfect for conveying elegance, richness, and artistic flair in any design project.

Best used for

  • Luxury branding and marketing
  • High-end event design and decor
  • Artistic installations and exhibitions
  • Fantasy novel and game covers
  • Opulent fashion brand identity
  • Creative portfolio websites

Suggested color roles

primary

Use #2A0A2E as the deepest, foundational purple-black for backgrounds or main structural elements, conveying profound depth.

secondary

Employ #5C0B66 or #9C1FAD for supporting sections, subheadings, or layered elements, building on the rich purple theme.

accent

Reserve #FF006E for vibrant highlights, call-to-action buttons, or to draw immediate attention with its striking ruby hue.

background

Choose #2A0A2E for an immersive, dark background, allowing the vibrant jewel tones to truly pop and glow.

text

Utilize a crisp white (e.g., #FFFFFF) for general body text on dark backgrounds, with #FF006E or #2B7A00 for key headings or accents.

Accessibility notes

  • Ensure strong contrast between light text and the darker colors like #2A0A2E or #5C0B66 for WCAG compliance.
  • Avoid using #FF006E or #2B7A00 for small body text, as their intensity might reduce readability on certain backgrounds.
  • Test color combinations for color blindness, especially the red and green hues, which can be challenging.
  • For optimal legibility, use a very dark charcoal for text on any lighter, near-white background.

Recommended combinations

Jewel Sparkle

A dark base with vibrant magenta and emerald green accents for a dramatic, luxurious feel.

#2A0A2E · #FF006E · #2B7A00

Regal Depth

Layered purples for sophisticated visual compositions, creating depth and elegance.

#5C0B66 · #9C1FAD · #2A0A2E

Dynamic Contrast

Bold green and magenta against a dark purple-black background for high-impact designs.

#2B7A00 · #FF006E · #2A0A2E

CSS variables

:root {
  --gothic-stained-glass-1: #2A0A2E;
  --gothic-stained-glass-2: #5C0B66;
  --gothic-stained-glass-3: #9C1FAD;
  --gothic-stained-glass-4: #2B7A00;
  --gothic-stained-glass-5: #FF006E;
}

Tailwind config

theme: {
  extend: {
    colors: {
      "gothic-stained-glass": {
        1: "#2A0A2E",
        2: "#5C0B66",
        3: "#9C1FAD",
        4: "#2B7A00",
        5: "#FF006E",
      }
    }
  }
}

Related searches

vibrant jewel tone paletteelegant gothic colorsrich dark purple greendramatic magenta huesluxurious stained glass

Palette colors

Hex values

Color 1#2A0A2E
·
Color 2#5C0B66
·
Color 3#9C1FAD
·
Color 4#2B7A00
·
Color 5#FF006E
·

Accessibility

Contrast checker

1
2
3
4
5
1
1.4:1Fail
2.7:1Fail
3.3:1AA18
4.6:1AA
2
1.4:1Fail
1.9:1Fail
2.3:1Fail
3.2:1AA18
3
2.7:1Fail
1.9:1Fail
1.2:1Fail
1.7:1Fail
4
3.3:1AA18
2.3:1Fail
1.2:1Fail
1.4:1Fail
5
4.6:1AA
3.2:1AA18
1.7:1Fail
1.4:1Fail

Similar palettes

More like Gothic Stained Glass

View all dark