Back to palettes

Palette

Gothic Window Pane

Dark and dramatic, reminiscent of stained-glass windows in a gothic cathedral, with deep jewel tones.

darkdark5 colors
More dark palettes

Preview

See it in context.

Interface

New

Ready when you are.

A quick look at how Gothic Window Pane 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 Window Pane.

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

Data visualization

#8B0000#000080#000000#36454F#C0C0C0

Palette guide

How to use Gothic Window Pane

Overview

The Gothic Window Pane palette delivers a dramatic and high-contrast experience, echoing the stained-glass windows of ancient cathedrals. It combines powerful jewel tones like #8B0000 (dark red) and #000080 (dark blue) with the starkness of #000000 (black) and the subtle depth of #36454F (charcoal gray). The inclusion of #C0C0C0 provides a crucial light counterpoint, ensuring versatility. This palette is ideal for designers seeking to create impactful, elegant, and historically-inspired visual narratives. Developers can leverage these distinct hex codes to build interfaces that are both visually striking and functionally clear, offering strong differentiation for UI elements.

Best used for

  • Dramatic website themes
  • Art and historical institution branding
  • High-contrast data visualizations
  • Luxury product presentations
  • Themed mobile applications
  • Editorial design with strong imagery

Suggested color roles

primary

Use #000000 as the foundational primary color for backgrounds or structural elements to establish a strong, dramatic base.

secondary

Apply #36454F for supporting content blocks, subtle dividers, or secondary navigation, offering a softer dark alternative.

accent

Employ #8B0000 or #000080 for striking accents, interactive elements, or key graphic details to create focal points.

background

Choose #000000 for maximum drama, or #36454F for a slightly less intense but still profound dark background.

text

Utilize #C0C0C0 for body text and #8B0000 or #000080 for headings on dark backgrounds to ensure excellent readability and visual interest.

Accessibility notes

  • Ensure high contrast for text on dark backgrounds, especially using #C0C0C0 on #000000 or #36454F.
  • Verify that interactive elements using #8B0000 or #000080 have sufficient contrast against surrounding darks.
  • Avoid using #36454F as text on #000000, as the contrast will be insufficient for readability.
  • Clearly differentiate interactive elements from static content using distinct accent colors like #8B0000.

Recommended combinations

Dramatic Contrast

Excellent for high-impact titles, call-to-action buttons, or key information blocks that demand immediate attention.

#000000 · #C0C0C0 · #8B0000

Jewel Tones

Ideal for creating striking borders, graphic elements, or data points that need to stand out with rich color.

#000000 · #8B0000 · #000080

Subtle Structure

Perfect for secondary information, footnotes, or subtle background patterns where elegance and readability are key.

#36454F · #C0C0C0 · #000080

CSS variables

:root {
  --gothic-window-pane-1: #8B0000;
  --gothic-window-pane-2: #000080;
  --gothic-window-pane-3: #000000;
  --gothic-window-pane-4: #36454F;
  --gothic-window-pane-5: #C0C0C0;
}

Tailwind config

theme: {
  extend: {
    colors: {
      "gothic-window-pane": {
        1: "#8B0000",
        2: "#000080",
        3: "#000000",
        4: "#36454F",
        5: "#C0C0C0",
      }
    }
  }
}

Related searches

gothic stained glass palettehigh contrast dark themejewel tone design colorsblack red blue color schemedramatic elegant UI palette

Palette colors

Hex values

Color 1#8B0000
·
Color 2#000080
·
Color 3#000000
·
Color 4#36454F
·
Color 5#C0C0C0
·

Accessibility

Contrast checker

1
2
3
4
5
1
1.6:1Fail
2.1:1Fail
1:1Fail
5.5:1AA
2
1.6:1Fail
1.3:1Fail
1.6:1Fail
8.8:1AAA
3
2.1:1Fail
1.3:1Fail
2.1:1Fail
11.5:1AAA
4
1:1Fail
1.6:1Fail
2.1:1Fail
5.4:1AA
5
5.5:1AA
8.8:1AAA
11.5:1AAA
5.4:1AA

Similar palettes

More like Gothic Window Pane

View all dark
Midnight Chapel Rose
Black Rose Bloom
Crimson Altar
Deep Ocean Abyssal
Enigma Quill Ink
Enigmatic Shadow Tale