Palette

Stained Glass Hues

Deep and luxurious jewel tones, reflecting the majestic beauty of stained-glass windows in a grand cathedral.

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

#4A148C#1A237E#1B5E20#BF360C#F9A825

Palette guide

How to use Stained Glass Hues

Overview

The 'Stained Glass Hues' palette is a vibrant, opulent collection reminiscent of cathedral artistry, perfect for projects needing a rich and majestic feel. It features deep purples like #4A148C (Amethyst) and #1A237E (Indigo), complemented by the lush #1B5E20 (Dark Green). A striking #BF360C (Rust) and a bright #F9A825 (Marigold) add warmth and contrast, creating a truly dynamic visual experience. Designers and developers can utilize these jewel tones for branding, UI, or digital art that aims to convey luxury, tradition, and profound beauty, making a powerful visual statement.

Best used for

Luxury event branding and invitations
High-end fashion and jewelry websites
Cultural and historical institution branding
Rich, opulent digital artwork and illustrations
Gourmet food and beverage packaging
Theatrical set designs and promotional materials

Suggested color roles

primary

Use #4A148C or #1A237E for main branding elements, conveying depth and sophistication.

secondary

Introduce #1B5E20 as a supportive color for sections or sub-elements, offering a natural contrast.

accent

The bright #F9A825 is excellent for calls-to-action or important highlights, drawing immediate attention.

background

A deep tone like #1A237E can serve as an elegant background, allowing brighter colors to pop.

text

For dark backgrounds, a light color like white or a very light cream works best. For lighter sections, a deep charcoal or #1A237E can be used for text.

Accessibility notes

Ensure sufficient contrast when using #BF360C for text against dark backgrounds; test for readability.
The vibrant #F9A825 should have strong contrast with its background for accessibility compliance.
Avoid pairing #4A148C and #1A237E as text and background without careful contrast checks.
Consider using #1B5E20 for larger text elements against a lighter neutral for better legibility.

Recommended combinations

Opulent Contrast

Ideal for bold headers and vibrant calls-to-action on a deep, rich background.

#1A237E · #F9A825 · #BF360C

Earthy Jewel

Creates a balanced yet striking look, combining deep purple with natural green and a golden accent.

#4A148C · #1B5E20 · #F9A825

Dramatic Depth

Excellent for sophisticated interfaces or branding where a strong, luxurious presence is desired.

#1A237E · #4A148C · #BF360C

CSS variables

:root {
  --stained-glass-hues-1: #4A148C;
  --stained-glass-hues-2: #1A237E;
  --stained-glass-hues-3: #1B5E20;
  --stained-glass-hues-4: #BF360C;
  --stained-glass-hues-5: #F9A825;
}

Tailwind config

theme: {
  extend: {
    colors: {
      "stained-glass-hues": {
        1: "#4A148C",
        2: "#1A237E",
        3: "#1B5E20",
        4: "#BF360C",
        5: "#F9A825",
      }
    }
  }
}

Hex values

Color 1#4A148C

Color 2#1A237E

Color 3#1B5E20

Color 4#BF360C

Color 5#F9A825

Accessibility

Contrast checker

1.1:1Fail

1.5:1Fail

2.1:1Fail

6:1AA

1.1:1Fail

1.7:1Fail

2.4:1Fail

6.7:1AA

1.5:1Fail

1.7:1Fail

1.4:1Fail

4:1AA18

2.1:1Fail

2.4:1Fail

1.4:1Fail

2.8:1Fail

6:1AA

6.7:1AA

4:1AA18

2.8:1Fail

Similar palettes

More like Stained Glass Hues

View all Dark

Imperial Gemstone Array

Gothic Window Glaze

Gothic Stone Cloister

Royal Gem Casket

Amethyst Star Cluster

Aurora Borealis Dream