Palette

Gothic Stained Glass

Deep purples and a hint of dark pink capture the dramatic light filtering through an ancient cathedral's windows.

darkdark5 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

#1B0C1E#3A0D48#6D1A8D#BF246D#F0C4CC

Palette guide

How to use Gothic Stained Glass

Overview

The Gothic Stained Glass palette features deep purples and a hint of dark pink, capturing the dramatic light filtering through an ancient cathedral's windows. This collection includes a profound purple-black #1B0C1E, a rich dark purple #3A0D48, a vibrant violet #6D1A8D, a striking magenta #BF246D, and a luminous blush #F0C4CC. It's ideal for designers seeking a romantic, mystical, and visually rich aesthetic. The palette offers a powerful balance between deep, foundational colors and striking, jewel-like accents, perfect for conveying elegance, drama, and a touch of medieval charm.

Best used for

Romantic fantasy themed designs
Luxury cosmetics branding
Gothic fashion collections
Artistic photography presentations
Mystical event branding and decor
Intimate digital spaces and websites

Suggested color roles

primary

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

secondary

Employ #3A0D48 for supporting sections, subheadings, or layered elements, building on the dark purple theme.

accent

Reserve #F0C4CC for luminous highlights, delicate details, or as a soft, romantic accent against the darker tones.

background

Choose #1B0C1E for an immersive, dark background, or #F0C4CC for a light, ethereal base with dark text.

text

Utilize #F0C4CC for primary text on dark backgrounds like #1B0C1E or #3A0D48 for optimal readability and a soft glow.

Accessibility notes

Ensure strong contrast between #F0C4CC text and darker purples like #1B0C1E or #3A0D48 for WCAG compliance.
Avoid using #BF246D for small body text, as its intensity might reduce readability on certain backgrounds.
Test for color blindness, particularly with the magenta and violet hues to ensure distinctness where necessary.
For lighter backgrounds (e.g., near-white), use a very dark purple like #1B0C1E for text to maintain legibility.

Recommended combinations

Deep Romance

A dark base with a soft pink highlight and a vibrant magenta for a romantic, dramatic contrast.

#1B0C1E · #F0C4CC · #BF246D

Royal Gradient

Creates a smooth, rich purple progression for backgrounds or layered graphic elements.

#1B0C1E · #3A0D48 · #6D1A8D

Dramatic Flare

Dark purple with bright pink accents and a luminous highlight for dynamic and elegant designs.

#3A0D48 · #BF246D · #F0C4CC

CSS variables

:root {
  --gothic-stained-glass-4-1: #1B0C1E;
  --gothic-stained-glass-4-2: #3A0D48;
  --gothic-stained-glass-4-3: #6D1A8D;
  --gothic-stained-glass-4-4: #BF246D;
  --gothic-stained-glass-4-5: #F0C4CC;
}

Tailwind config

theme: {
  extend: {
    colors: {
      "gothic-stained-glass-4": {
        1: "#1B0C1E",
        2: "#3A0D48",
        3: "#6D1A8D",
        4: "#BF246D",
        5: "#F0C4CC",
      }
    }
  }
}

Hex values

Color 1#1B0C1E

Color 2#3A0D48

Color 3#6D1A8D

Color 4#BF246D

Color 5#F0C4CC

Accessibility

Contrast checker

1.2:1Fail

2:1Fail

3.3:1AA18

12.1:1AAA

1.2:1Fail

1.6:1Fail

2.8:1Fail

10.1:1AAA

2:1Fail

1.6:1Fail

1.7:1Fail

6.2:1AA

3.3:1AA18

2.8:1Fail

1.7:1Fail

3.7:1AA18

12.1:1AAA

10.1:1AAA

6.2:1AA

3.7:1AA18

Similar palettes

More like Gothic Stained Glass

Enchanted Crystal Cave

Evening Orchid Shimmer

Galactic Nebula Swirl