Back to palettes

Palette

Gothic Cathedral Stain

Deep, rich jewel tones evoke the solemn beauty of light through an ancient stained glass window.

darkdark5 colors
More dark palettes

Preview

See it in context.

Interface

New

Ready when you are.

A quick look at how Gothic Cathedral Stain 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 Cathedral Stain.

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

Data visualization

#4B0082#800080#8B0000#2F4F4F#000000

Palette guide

How to use Gothic Cathedral Stain

Overview

The "Gothic Cathedral Stain" palette offers deep, rich jewel tones, perfectly evoking the solemn beauty and filtered light through ancient stained glass windows. This collection features a majestic Dark Violet (#4B0082), a regal Purple (#800080), a powerful Dark Red (#8B0000), a deep Dark Slate Gray (#2F4F4F), and a grounding Black (#000000). Designers and developers can utilize these profound hues to create immersive, sophisticated, and historically inspired digital experiences. It's an excellent choice for projects requiring a dramatic flair, luxurious branding, or an atmosphere of deep mystery and elegance, capturing the essence of medieval artistry.

Best used for

  • Luxury brand websites and digital campaigns
  • Historical game environments or cinematic interfaces
  • High-end event invitations and decor
  • Art and design portfolios with a dark aesthetic
  • Theatrical production visual identity
  • Fashion editorials with a dramatic mood

Suggested color roles

primary

#4B0082 (Dark Violet) - A deep, mystical primary, ideal for hero sections, main navigation, or elements requiring a regal presence.

secondary

#2F4F4F (Dark Slate Gray) - Provides a cool, stable counterpoint, excellent for background panels, footers, or secondary content blocks.

accent

#8B0000 (Dark Red) - A passionate and dramatic accent, perfect for call-to-action buttons, alerts, or highlighting crucial information.

background

#000000 (Black) - The ultimate grounding background, providing maximum contrast for the rich jewel tones to truly shine.

text

#800080 (Purple) - A rich, legible color for headlines on a black background. For body text, white or a very light gray is recommended for readability on dark backgrounds.

Accessibility notes

  • Always use white or a very light gray for body text against #000000, #4B0082, or #2F4F4F to ensure readability.
  • Check contrast carefully when using #800080 or #8B0000 for text, especially against #2F4F4F. White text is often a safer choice.
  • Ensure sufficient contrast between adjacent vibrant colors like #4B0082 and #800080 if they define separate interactive elements.
  • Small text should ideally be white on the darkest colors to meet WCAG AA or AAA standards.

Recommended combinations

Deep Majesty

Creates a grand, imposing feel for headers, main sections, or decorative borders, with #000000 as a deep backdrop.

#000000 · #4B0082 · #800080

Dramatic Flair

Excellent for defining distinct content blocks or accentuating graphical elements with a powerful, jewel-toned contrast.

#2F4F4F · #8B0000 · #4B0082

Stained Glass Focus

Use these for creating striking calls-to-action, important alerts, or intricate graphic motifs against a dark canvas.

#000000 · #8B0000 · #800080

CSS variables

:root {
  --gothic-cathedral-stain-2-1: #4B0082;
  --gothic-cathedral-stain-2-2: #800080;
  --gothic-cathedral-stain-2-3: #8B0000;
  --gothic-cathedral-stain-2-4: #2F4F4F;
  --gothic-cathedral-stain-2-5: #000000;
}

Tailwind config

theme: {
  extend: {
    colors: {
      "gothic-cathedral-stain-2": {
        1: "#4B0082",
        2: "#800080",
        3: "#8B0000",
        4: "#2F4F4F",
        5: "#000000",
      }
    }
  }
}

Related searches

dark gothic jewel tonesmedieval stained glass colorsluxury dark mode palettedramatic web color schemesrich mysterious design colors

Palette colors

Hex values

Color 1#4B0082
·
Color 2#800080
·
Color 3#8B0000
·
Color 4#2F4F4F
·
Color 5#000000
·

Accessibility

Contrast checker

1
2
3
4
5
1
1.4:1Fail
1.3:1Fail
1.5:1Fail
1.6:1Fail
2
1.4:1Fail
1.1:1Fail
1.1:1Fail
2.2:1Fail
3
1.3:1Fail
1.1:1Fail
1.1:1Fail
2.1:1Fail
4
1.5:1Fail
1.1:1Fail
1.1:1Fail
2.4:1Fail
5
1.6:1Fail
2.2:1Fail
2.1:1Fail
2.4:1Fail

Similar palettes

More like Gothic Cathedral Stain

View all dark
Gothic Bloom Reverie
Gothic Cathedral Glint
Gothic Cathedral Shadow
Gothic Cathedral Whisper
Gothic Iron Lace
Gothic Manor Shadow