Back to palettes

Palette

Gothic Stained Glass

Bold, deep jewel tones reminiscent of light streaming through intricate gothic stained glass windows.

vibrantelegant5 colors
More vibrant 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

#4B0082#8B0000#00008B#DAA520#006400

Palette guide

How to use Gothic Stained Glass

Overview

The Gothic Stained Glass palette boasts bold, deep jewel tones reminiscent of light streaming through intricate cathedral windows. This vibrant collection includes a regal violet #4B0082, a powerful ruby #8B0000, a profound sapphire #00008B, an opulent gold #DAA520, and a rich emerald #006400. It's a fantastic choice for designs aiming for a majestic, historical, and visually striking aesthetic. Designers can harness these hues to create dynamic compositions that evoke traditional artistry while maintaining a modern, impactful presence, perfect for conveying grandeur and richness.

Best used for

  • Church and religious institution websites
  • Historical documentary branding
  • Fantasy game environment design
  • Luxury product display backdrops
  • Art history publications
  • Grand event backdrops and decor

Suggested color roles

primary

Use #4B0082 as a deep, royal primary color for large areas, conveying authority and spiritual depth.

secondary

Employ #00008B for supporting elements, offering a stable and rich navy blue contrast.

accent

Reserve #DAA520 for bright, opulent highlights, call-to-action buttons, or to simulate a golden glow.

background

A very dark neutral (e.g., #111111) is recommended for the main background to allow these intense colors to pop, or use #8B0000 for dramatic sections.

text

Utilize #DAA520 for headings or key text on dark backgrounds, and a crisp white (e.g., #FFFFFF) for general body text on #4B0082 or #00008B.

Accessibility notes

  • Ensure #DAA520 text on #4B0082 or #00008B backgrounds meets WCAG contrast standards.
  • Avoid using #8B0000 or #006400 for small body text without significant background contrast due to their intensity.
  • Test color combinations for color blindness, especially the red and green hues, as they can be challenging.
  • For optimal legibility, use a very dark charcoal for text on any lighter, near-white background.

Recommended combinations

Royal Opulence

A majestic trio of purple, gold, and blue, perfect for regal and luxurious designs.

#4B0082 · #DAA520 · #00008B

Earthy Jewels

Combines rich green, deep red, and golden yellow for a naturally opulent feel.

#006400 · #8B0000 · #DAA520

Stained Glow

Deep blue with a striking golden highlight and a profound purple for dramatic visual depth.

#00008B · #DAA520 · #4B0082

CSS variables

:root {
  --gothic-stained-glass-3-1: #4B0082;
  --gothic-stained-glass-3-2: #8B0000;
  --gothic-stained-glass-3-3: #00008B;
  --gothic-stained-glass-3-4: #DAA520;
  --gothic-stained-glass-3-5: #006400;
}

Tailwind config

theme: {
  extend: {
    colors: {
      "gothic-stained-glass-3": {
        1: "#4B0082",
        2: "#8B0000",
        3: "#00008B",
        4: "#DAA520",
        5: "#006400",
      }
    }
  }
}

Related searches

vibrant jewel tone palettegothic cathedral colorsdeep primary colorsrich architectural huesgold red blue green

Palette colors

Hex values

Color 1#4B0082
·
Color 2#8B0000
·
Color 3#00008B
·
Color 4#DAA520
·
Color 5#006400
·

Accessibility

Contrast checker

1
2
3
4
5
1
1.3:1Fail
1.2:1Fail
5.8:1AA
1.7:1Fail
2
1.3:1Fail
1.5:1Fail
4.5:1AA18
1.3:1Fail
3
1.2:1Fail
1.5:1Fail
6.8:1AA
2.1:1Fail
4
5.8:1AA
4.5:1AA18
6.8:1AA
3.3:1AA18
5
1.7:1Fail
1.3:1Fail
2.1:1Fail
3.3:1AA18

Similar palettes

More like Gothic Stained Glass

View all vibrant