Palette

Gothic Spire Shadow

A somber and mysterious palette inspired by the majestic, dark grandeur of gothic architecture and shadowy spires.

darkdark5 colors

More dark palettes

Preview

See it in context.

Interface

New

Ready when you are.

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

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

Data visualization

#181A1B#2C2E31#4C5158#737981#B1A6B3

Palette guide

How to use Gothic Spire Shadow

Overview

The Gothic Spire Shadow palette draws inspiration from the somber and mysterious grandeur of gothic architecture. This sophisticated grayscale collection ranges from the profound #181A1B to the subtly warm #B1A6B3, including mid-tones like #2C2E31, #4C5158, and #737981. It's an excellent choice for designers seeking to evoke a sense of mystery, elegance, and timelessness. The palette is particularly well-suited for dark mode interfaces, architectural presentations, or any project requiring a serious yet refined aesthetic with a hint of urban sophistication. Its subtle nuances create depth and intrigue.

Best used for

Dark mode UI/UX design
Architectural firm branding
Mystery novel covers and themes
Sophisticated tech company websites
Urban photography portfolios
High-end security service branding

Suggested color roles

primary

Use #181A1B as the deepest, foundational dark gray for backgrounds or primary elements, conveying strength and seriousness.

secondary

Employ #2C2E31 for supporting sections, secondary text, or as a slightly lighter contrast to the primary dark.

accent

Reserve #B1A6B3 for subtle highlights, delicate lines, or to provide a soft, luminous contrast against darker tones.

background

Choose #181A1B for an immersive, dark mode background, or a lighter shade like #B1A6B3 for a soft, airy base.

text

Utilize #B1A6B3 for primary text on dark backgrounds like #181A1B or #2C2E31 for optimal readability and a touch of warmth.

Accessibility notes

Ensure sufficient contrast between #B1A6B3 text and darker grays like #181A1B or #2C2E31 for WCAG compliance.
Avoid using mid-tone grays such as #4C5158 or #737981 for small body text, especially on similar backgrounds.
Test readability of #181A1B text on lighter grays like #B1A6B3; a pure black might be needed for high contrast.
Use larger font sizes for text elements in #737981 to improve legibility on medium-dark backgrounds.

Recommended combinations

Deep Shadow

Creates layered dark grays for profound depth in backgrounds or complex layouts.

#181A1B · #2C2E31 · #4C5158

Subtle Highlight

A dark base with a soft, luminous contrast and a balanced mid-tone for elegance.

#181A1B · #B1A6B3 · #737981

Modern Contrast

Ideal for a balanced dark mode aesthetic, offering clear separation and sophistication.

#2C2E31 · #B1A6B3 · #4C5158

CSS variables

:root {
  --gothic-spire-shadow-1: #181A1B;
  --gothic-spire-shadow-2: #2C2E31;
  --gothic-spire-shadow-3: #4C5158;
  --gothic-spire-shadow-4: #737981;
  --gothic-spire-shadow-5: #B1A6B3;
}

Tailwind config

theme: {
  extend: {
    colors: {
      "gothic-spire-shadow": {
        1: "#181A1B",
        2: "#2C2E31",
        3: "#4C5158",
        4: "#737981",
        5: "#B1A6B3",
      }
    }
  }
}

Hex values

Color 1#181A1B

Color 2#2C2E31

Color 3#4C5158

Color 4#737981

Color 5#B1A6B3

Accessibility

Contrast checker

1.3:1Fail

2.2:1Fail

4:1AA18

7.5:1AAA

1.3:1Fail

1.7:1Fail

3.1:1AA18

5.8:1AA

2.2:1Fail

1.7:1Fail

1.8:1Fail

3.4:1AA18

4:1AA18

3.1:1AA18

1.8:1Fail

1.9:1Fail

7.5:1AAA

5.8:1AA

3.4:1AA18

1.9:1Fail

Similar palettes

More like Gothic Spire Shadow

View all dark

Cathedral Shadow Grey

Gothic Arch Mystery

Gothic Chapel Stone

Gothic Library Arch

Gothic Midnight Bloom

Gothic Stone Chapel