Back to palettes

Palette

Gothic Window Glow

Dark, mysterious tones of deep grey, royal purple, and midnight blue, inspired by an old gothic window.

darkdark5 colors
More dark palettes

Preview

See it in context.

Interface

New

Ready when you are.

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

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

Data visualization

#2F4F4F#696969#4B0082#800080#000080

Palette guide

How to use Gothic Window Glow

Overview

The Gothic Window Glow palette masterfully blends dark, enigmatic tones of slate gray, deep purple, and midnight blue, reminiscent of light filtering through an ancient window. Featuring the grounding #2F4F4F and #696969, it provides a solid yet mysterious base. The introduction of #4B0082, #800080, and #000080 adds a jewel-toned complexity, creating a sophisticated and somewhat melancholic mood. This palette is perfect for designers crafting interfaces that require depth, intrigue, and a touch of the dramatic. Developers can use these hex codes to build immersive user experiences, particularly for applications or websites with a sophisticated, artistic, or mysterious theme.

Best used for

  • Mystery game interfaces
  • Art gallery websites
  • Dramatic editorial layouts
  • Luxury event invitations
  • Dark-themed apps and software
  • Abstract digital art

Suggested color roles

primary

Use #2F4F4F as a foundational dark slate blue-green for large background areas or primary structural elements, providing a strong anchor.

secondary

Apply #696969 for supporting content blocks, subtle dividers, or secondary navigation, offering a versatile mid-tone gray.

accent

Employ #800080 sparingly for vibrant highlights, interactive elements, or key graphic details to add a touch of royal intrigue.

background

Choose #000080 for an intensely deep, immersive background, or #2F4F4F for a slightly softer but equally dark base.

text

Utilize #4B0082 for headings and important text on lighter backgrounds, or a crisp white/light gray for body copy on dark backgrounds.

Accessibility notes

  • Ensure sufficient contrast for text on dark backgrounds, especially when using #696969 on #2F4F4F.
  • Verify that interactive elements using #800080 have adequate contrast against surrounding dark colors.
  • Avoid placing #000080 text on #4B0082 backgrounds, as the contrast will be insufficient for readability.
  • For body text on the darkest colors like #000080, use a very light gray or pure white for optimal readability.

Recommended combinations

Deep Twilight

Excellent for creating a layered, mysterious background, navigation bars, or sophisticated data visualizations.

#000080 · #2F4F4F · #696969

Mystic Accent

Ideal for highlighting key features, call-to-action buttons, or drawing attention to important information with a vibrant pop.

#2F4F4F · #800080 · #696969

Shadowed Hues

Perfect for subtle gradients, graphic overlays, or illustrations where a transition through deep blues and purples is desired.

#4B0082 · #800080 · #000080

CSS variables

:root {
  --gothic-window-glow-1: #2F4F4F;
  --gothic-window-glow-2: #696969;
  --gothic-window-glow-3: #4B0082;
  --gothic-window-glow-4: #800080;
  --gothic-window-glow-5: #000080;
}

Tailwind config

theme: {
  extend: {
    colors: {
      "gothic-window-glow": {
        1: "#2F4F4F",
        2: "#696969",
        3: "#4B0082",
        4: "#800080",
        5: "#000080",
      }
    }
  }
}

Related searches

dark mysterious color palettegothic blue purple greymidnight blue color schemeenigmatic UI colorsjewel tone dark theme

Palette colors

Hex values

Color 1#2F4F4F
·
Color 2#696969
·
Color 3#4B0082
·
Color 4#800080
·
Color 5#000080
·

Accessibility

Contrast checker

1
2
3
4
5
1
1.6:1Fail
1.5:1Fail
1.1:1Fail
1.8:1Fail
2
1.6:1Fail
2.4:1Fail
1.7:1Fail
2.9:1Fail
3
1.5:1Fail
2.4:1Fail
1.4:1Fail
1.2:1Fail
4
1.1:1Fail
1.7:1Fail
1.4:1Fail
1.7:1Fail
5
1.8:1Fail
2.9:1Fail
1.2:1Fail
1.7:1Fail

Similar palettes

More like Gothic Window Glow

View all dark