Palette

Gothic Crypt Shadow

Enveloping shades of deep purples and grays evoke the ancient, eerie shadows of a forgotten gothic crypt.

darkdark5 colors

More dark palettes

Preview

See it in context.

Interface

New

Ready when you are.

A quick look at how Gothic Crypt Shadow 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 Crypt Shadow.

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

Data visualization

#1F1A24#3D3540#5C505D#7A707B#AB9BBF

Palette guide

How to use Gothic Crypt Shadow

Overview

The Gothic Crypt Shadow palette features enveloping shades of deep purples and grays, designed to evoke the ancient, eerie shadows of a forgotten gothic crypt. Ranging from a profound black-purple (#1F1A24) through various dark grey-purples (#3D3540, #5C505D, #7A707B), it culminates in a muted, ghostly light purple-grey (#AB9BBF). This palette is exceptionally useful for designers and developers crafting projects that require an atmospheric, mysterious, or slightly unsettling mood. It's perfect for conveying solemnity, forgotten history, or a subtle, unsettling elegance in digital and print mediums.

Best used for

Horror game environments and UI
Mysterious or dark fantasy branding
Gothic literature covers and illustrations
Solemn memorial or historical designs
Atmospheric web design for niche markets
Digital art with an eerie or somber mood

Suggested color roles

primary

Designate #1F1A24 as the foundational, deepest shadow for backgrounds or main structural elements, providing profound depth.

secondary

Utilize #3D3540 for secondary content areas or large text, offering a rich, supporting dark grey-purple that enhances the mood.

accent

Apply #AB9BBF sparingly for delicate highlights, ghostly effects, or subtle interactive elements, providing an ethereal contrast.

background

The deepest shade, #1F1A24, works best as an enveloping background, allowing the lighter greys to emerge from the shadows.

text

For optimal readability, use #AB9BBF or a crisp white on the darker shades like #1F1A24, #3D3540, and #5C505D.

Accessibility notes

All colors in this palette are dark; white or #AB9BBF is essential for text contrast.
Ensure #AB9BBF has sufficient contrast when used as text on #1F1A24; it should pass WCAG AA.
Avoid pairing #3D3540 with #5C505D for small text due to potential low contrast.
Always verify contrast ratios for all text elements, especially with the darker mid-tones.

Recommended combinations

Shadowy Depths

Ideal for creating layered backgrounds or main content areas, building a sense of profound, mysterious depth.

#1F1A24 · #3D3540 · #5C505D

Eerie Contrast

Perfect for hero sections or focal points, leveraging the strong contrast between the deepest shadow and a ghostly highlight.

#1F1A24 · #AB9BBF · #7A707B

Subtle Gradient

Use for subtle background textures or layered UI elements, creating a smooth, nuanced transition of dark grey-purples.

#3D3540 · #5C505D · #7A707B

CSS variables

:root {
  --gothic-crypt-shadow-1: #1F1A24;
  --gothic-crypt-shadow-2: #3D3540;
  --gothic-crypt-shadow-3: #5C505D;
  --gothic-crypt-shadow-4: #7A707B;
  --gothic-crypt-shadow-5: #AB9BBF;
}

Tailwind config

theme: {
  extend: {
    colors: {
      "gothic-crypt-shadow": {
        1: "#1F1A24",
        2: "#3D3540",
        3: "#5C505D",
        4: "#7A707B",
        5: "#AB9BBF",
      }
    }
  }
}

Hex values

Color 1#1F1A24

Color 2#3D3540

Color 3#5C505D

Color 4#7A707B

Color 5#AB9BBF

Accessibility

Contrast checker

1.4:1Fail

2.2:1Fail

3.6:1AA18

6.6:1AA

1.4:1Fail

1.5:1Fail

2.5:1Fail

4.6:1AA

2.2:1Fail

1.5:1Fail

1.6:1Fail

3:1Fail

3.6:1AA18

2.5:1Fail

1.6:1Fail

1.8:1Fail

6.6:1AA

4.6:1AA

3:1Fail

1.8:1Fail

Similar palettes

More like Gothic Crypt Shadow

View all dark

Black Rose Bloom

Enigmatic Shadow Tale

Gothic Cathedral Shadow

Gothic Cathedral Whisper

Gothic Iron Lace

Gothic Manor Shadow