Back to palettes

Palette

Stained Glass Hues

Deep, jewel-toned purples and reds, reminiscent of the dramatic light filtering through ancient stained glass.

darkelegant5 colors
More dark palettes

Preview

See it in context.

Interface

New

Ready when you are.

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

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

Data visualization

#483D8B#8B008B#A020F0#DC143C#36454F

Palette guide

How to use Stained Glass Hues

Overview

The 'Stained Glass Hues' palette offers a rich, elegant blend of deep jewel tones perfect for projects requiring a touch of dramatic sophistication. Featuring the regal purples of Dark Slate Blue (#483D8B) and Dark Magenta (#8B008B), alongside the vibrant Amethyst (#A020F0) and striking Crimson (#DC143C), this collection evokes the majestic beauty of ancient cathedrals. A grounding Charcoal (#36454F) anchors the palette, providing a versatile dark neutral. Designers and developers can leverage these hues for branding, UI elements, or digital art that aims for a luxurious and impactful aesthetic, ensuring a memorable visual experience.

Best used for

  • Luxury brand websites and apps
  • High-end event invitations and decor
  • Gothic or fantasy-themed digital art
  • Elegant fashion and jewelry e-commerce
  • Dramatic interior design visualizations
  • Theatrical or performance art branding

Suggested color roles

primary

Use Dark Magenta (#8B008B) or Amethyst (#A020F0) for main headers or key UI elements to establish a luxurious feel.

secondary

Dark Slate Blue (#483D8B) provides a deep, sophisticated contrast, ideal for subheadings or secondary buttons.

accent

Crimson (#DC143C) is a powerful accent, perfect for calls-to-action or critical alerts that need to stand out.

background

Charcoal (#36454F) offers a dark, grounding background that enhances the jewel tones' richness.

text

For dark backgrounds like #36454F, use a light text color such as white or a very light gray. For lighter elements, a deep charcoal like #36454F works well.

Accessibility notes

  • Ensure sufficient contrast between #36454F and lighter text; aim for AA or AAA compliance.
  • Crimson (#DC143C) might require careful pairing with text for readability, especially for small fonts.
  • Avoid placing similar dark tones like #483D8B and #8B008B directly adjacent without clear separation.
  • Use Amethyst (#A020F0) for larger text or headings to maintain legibility against darker backgrounds.

Recommended combinations

Gothic Elegance

For dramatic interfaces or branding, using #36454F as background, #A020F0 for main content, and #DC143C for highlights.

#36454F · #A020F0 · #DC143C

Royal Contrast

To create a rich, layered purple theme suitable for sophisticated digital art or luxury product displays.

#483D8B · #8B008B · #A020F0

Deep Drama

Effective for high-impact landing pages, utilizing the deep base, a dominant purple, and a vibrant call-to-action.

#36454F · #483D8B · #DC143C

CSS variables

:root {
  --stained-glass-hues-2-1: #483D8B;
  --stained-glass-hues-2-2: #8B008B;
  --stained-glass-hues-2-3: #A020F0;
  --stained-glass-hues-2-4: #DC143C;
  --stained-glass-hues-2-5: #36454F;
}

Tailwind config

theme: {
  extend: {
    colors: {
      "stained-glass-hues-2": {
        1: "#483D8B",
        2: "#8B008B",
        3: "#A020F0",
        4: "#DC143C",
        5: "#36454F",
      }
    }
  }
}

Related searches

jewel tone color schemedark elegant palettegothic color combinationsroyal purple red colorscathedral inspired palette

Palette colors

Hex values

Color 1#483D8B
·
Color 2#8B008B
·
Color 3#A020F0
·
Color 4#DC143C
·
Color 5#36454F
·

Accessibility

Contrast checker

1
2
3
4
5
1
1.1:1Fail
1.7:1Fail
1.8:1Fail
1.1:1Fail
2
1.1:1Fail
1.6:1Fail
1.7:1Fail
1.2:1Fail
3
1.7:1Fail
1.6:1Fail
1.1:1Fail
1.9:1Fail
4
1.8:1Fail
1.7:1Fail
1.1:1Fail
2:1Fail
5
1.1:1Fail
1.2:1Fail
1.9:1Fail
2:1Fail

Similar palettes

More like Stained Glass Hues

View all dark
Velvet Renaissance
Art Deco Emerald
Byzantine Jewel
Cathedral Glass Dream
Cathedral Stained Glass
Crimson Spark