Back to palettes

Palette

Stained Glass Gloom

A dramatic palette inspired by ancient gothic cathedrals, featuring rich, shadowy jewel tones and stone greys.

darkdark5 colors
More dark palettes

Preview

See it in context.

Interface

New

Ready when you are.

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

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

Data visualization

#4A0000#0A344A#301A4B#333333#606060

Palette guide

How to use Stained Glass Gloom

Overview

The Stained Glass Gloom palette offers a dramatic and mysterious aesthetic, drawing inspiration from ancient gothic cathedrals. Featuring rich, shadowy jewel tones like deep crimson #4A0000, enigmatic sapphire #0A344A, and regal amethyst #301A4B, this scheme is ideal for creating an atmosphere of sophisticated depth. Complementary stone greys, #333333 and #606060, ground the vibrant darks, providing versatile neutrals for backgrounds and subtle contrast. Designers and developers can leverage this palette to evoke a sense of history, luxury, and solemn elegance in their projects, ensuring a visually impactful and memorable experience.

Best used for

  • Luxury brand identities (e.g., high-end spirits, bespoke fashion)
  • Dark mode UI/UX designs for apps and websites
  • Thematic websites for historical fiction or fantasy genres
  • Dramatic video game interfaces or cinematic title sequences
  • Elegant event invitations or editorial layouts
  • Gothic-inspired art and digital illustrations

Suggested color roles

primary

Deep Sapphire #0A344A: A commanding and sophisticated base, perfect for main navigation, large hero sections, or primary branding elements, conveying depth and mystery.

secondary

Regal Amethyst #301A4B: Provides a rich counterpoint to the primary, suitable for subheadings, secondary interactive elements, or complementary content blocks, adding a touch of opulence.

accent

Crimson Shadow #4A0000: A powerful, dramatic accent for call-to-action buttons, key highlights, or decorative flourishes, drawing immediate attention.

background

Charcoal Stone #333333: A solid, dark neutral ideal for expansive backgrounds, providing a stable canvas that allows the jewel tones to truly pop.

text

For optimal readability on dark backgrounds like #333333 or #606060, consider a bright white or very light grey (e.g., #F0F0F0) to ensure sufficient contrast.

Accessibility notes

  • Ensure sufficient contrast between text and background, especially when using jewel tones on grey or other dark colors. Use a tool to check WCAG compliance.
  • Avoid placing two dark jewel tones adjacent without a clear separator or sufficient size difference, as their contrast can be minimal.
  • Reserve the darkest hex codes like #4A0000 for accents or large graphical elements rather than small, critical text.
  • Consider a very light text color (e.g., white or near-white) for all textual content to maximize readability on these inherently dark backgrounds.

Recommended combinations

Gothic Depth

Ideal for main interface sections, combining a deep primary with a rich secondary over a grounding dark background.

#0A344A · #301A4B · #333333

Dramatic Highlight

Use #4A0000 as a striking accent against the neutral greys for call-to-actions or important visual cues.

#4A0000 · #333333 · #606060

Shadowed Elegance

Creates a sophisticated and layered look, suitable for complex data visualizations or multi-panel layouts where subtle distinctions are desired.

#301A4B · #0A344A · #606060

CSS variables

:root {
  --stained-glass-gloom-1: #4A0000;
  --stained-glass-gloom-2: #0A344A;
  --stained-glass-gloom-3: #301A4B;
  --stained-glass-gloom-4: #333333;
  --stained-glass-gloom-5: #606060;
}

Tailwind config

theme: {
  extend: {
    colors: {
      "stained-glass-gloom": {
        1: "#4A0000",
        2: "#0A344A",
        3: "#301A4B",
        4: "#333333",
        5: "#606060",
      }
    }
  }
}

Related searches

dark gothic color palettejewel tone web designmysterious branding colorsdeep purple blue red color schemedramatic UI color guide

Palette colors

Hex values

Color 1#4A0000
·
Color 2#0A344A
·
Color 3#301A4B
·
Color 4#333333
·
Color 5#606060
·

Accessibility

Contrast checker

1
2
3
4
5
1
1.2:1Fail
1.1:1Fail
1.3:1Fail
2.6:1Fail
2
1.2:1Fail
1.2:1Fail
1:1Fail
2.1:1Fail
3
1.1:1Fail
1.2:1Fail
1.2:1Fail
2.4:1Fail
4
1.3:1Fail
1:1Fail
1.2:1Fail
2:1Fail
5
2.6:1Fail
2.1:1Fail
2.4:1Fail
2:1Fail

Similar palettes

More like Stained Glass Gloom

View all dark
Gothic Velvet Drama
Velvet Crimson Gloom
Velvet Crypt Shadow
Volcanic Crater Lake
Abyss Gaze
Abyssal Bioluminescent Glow