Palette

Medieval Stained Glass

Deep, jewel-toned purples and richer hues reminiscent of light filtering through old stained glass.

darkelegant5 colors

More dark palettes

Preview

See it in context.

Interface

New

Ready when you are.

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

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

Data visualization

#36013F#580058#9B009B#CC66CC#E6B3E6

Palette guide

How to use Medieval Stained Glass

Overview

The "Medieval Stained Glass" palette offers a captivating journey through deep, jewel-toned purples, reminiscent of light filtering through ancient windows. This monochromatic scheme ranges from the profound #36013F and rich #580058 to the vibrant #9B009B. Lighter shades like #CC66CC and the ethereal #E6B3E6 complete the set, providing versatility for various design applications. Designers can use this palette to evoke a sense of mystery, elegance, or spiritual depth. For developers, these hex codes ensure a consistent, sophisticated visual language in UI design, digital art, or branding that aims for a luxurious, gothic, or magical aesthetic, easily adaptable for dark mode interfaces.

Best used for

Gothic or fantasy game interfaces
Luxury event branding (weddings, galas)
Spiritual or meditative app design
Mystical book covers or illustrations
High-end fashion or jewelry websites
Elegant dark mode UI themes

Suggested color roles

primary

#580058 - A deep, rich purple that commands attention, ideal for large background areas, main sections, or brand identity.

secondary

#9B009B - A vibrant, true purple, perfect for prominent headings, call-to-action buttons, or key interactive elements.

accent

#E6B3E6 - A soft, ethereal lavender, excellent for subtle highlights, hover states, or delicate decorative patterns, adding luminosity.

background

#36013F - The darkest shade, providing a profound and elegant backdrop, especially effective for dark themes, allowing brighter colors to pop.

text

#CC66CC - A medium-light purple, suitable for body text on dark backgrounds like #36013F or #580058, offering good readability within the palette. Alternatively, pure white text for maximum contrast.

Accessibility notes

Ensure #CC66CC text on #36013F or #580058 backgrounds meets WCAG contrast standards.
Avoid using #E6B3E6 for small text on #CC66CC as contrast may be insufficient.
For critical text elements, consider using pure white on #36013F or #580058 to ensure maximum readability.
The contrast between adjacent shades like #9B009B and #CC66CC may be low; use them for distinct elements, not text on background.

Recommended combinations

Deep Elegance

#36013F as a profound background, #E6B3E6 for delicate details or small icons, and #9B009B for striking headlines.

#36013F · #E6B3E6 · #9B009B

Vibrant Glow

#580058 as a rich base, #CC66CC for content areas, and #E6B3E6 for luminous highlights or interactive elements.

#580058 · #CC66CC · #E6B3E6

Gothic Frame

Use #9B009B for a vibrant border, #36013F for inner content areas, and #CC66CC for subheadings or links.

#9B009B · #36013F · #CC66CC

CSS variables

:root {
  --medieval-stained-glass-1: #36013F;
  --medieval-stained-glass-2: #580058;
  --medieval-stained-glass-3: #9B009B;
  --medieval-stained-glass-4: #CC66CC;
  --medieval-stained-glass-5: #E6B3E6;
}

Tailwind config

theme: {
  extend: {
    colors: {
      "medieval-stained-glass": {
        1: "#36013F",
        2: "#580058",
        3: "#9B009B",
        4: "#CC66CC",
        5: "#E6B3E6",
      }
    }
  }
}

Hex values

Color 1#36013F

Color 2#580058

Color 3#9B009B

Color 4#CC66CC

Color 5#E6B3E6

Accessibility

Contrast checker

1.3:1Fail

2.3:1Fail

5.1:1AA

9.7:1AAA

1.3:1Fail

1.8:1Fail

4.1:1AA18

7.7:1AAA

2.3:1Fail

1.8:1Fail

2.2:1Fail

4.2:1AA18