Back to palettes

Palette

Gothic Cathedral Shadow

A solemn spectrum of dark grays, capturing the imposing grandeur and mysterious shadows of ancient gothic architecture.

darkdark5 colors
More dark palettes

Preview

See it in context.

Interface

New

Ready when you are.

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

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

Data visualization

#1F1F1F#3A3A3A#5C5C5C#808080#A6A6A6

Palette guide

How to use Gothic Cathedral Shadow

Overview

The "Gothic Cathedral Shadow" palette presents a sophisticated and solemn spectrum of dark grays, capturing the imposing grandeur and mysterious shadows of ancient gothic architecture. This monochrome collection includes a deep near-black (#1F1F1F), a rich charcoal (#3A3A3A), a medium slate gray (#5C5C5C), a balanced gray (#808080), and a lighter, ethereal gray (#A6A6A6). It's an excellent choice for designers and developers aiming for a minimalist, elegant, and powerful aesthetic. These shades provide a versatile foundation for creating depth, texture, and a refined user experience, perfect for projects that require understated sophistication and a strong, moody presence.

Best used for

  • High-end minimalist websites and applications
  • Luxury brand identity and packaging
  • Architectural portfolios or design studios
  • Dark mode UI/UX themes
  • Photography and art exhibition materials
  • Sophisticated fashion editorial layouts

Suggested color roles

primary

#1F1F1F (Deep Charcoal) - Serves as a strong, grounding primary, ideal for backgrounds, headers, or foundational UI elements in a dark theme.

secondary

#3A3A3A (Dark Gray) - Provides a subtle contrast to the primary, suitable for panels, card backgrounds, or secondary content areas.

accent

#A6A6A6 (Light Gray) - Functions as an elegant accent, perfect for highlighting interactive elements, subtle borders, or hover states in a dark interface.

background

#1F1F1F (Deep Charcoal) - An excellent choice for a dark, immersive background, providing a canvas for lighter elements to stand out.

text

#A6A6A6 (Light Gray) - Highly legible against the darker grays, making it ideal for primary body text. Alternatively, #808080 for secondary text.

Accessibility notes

  • Ensure sufficient contrast for text by pairing lighter grays like #A6A6A6 or #808080 with darker backgrounds like #1F1F1F or #3A3A3A.
  • Avoid using #5C5C5C or #808080 for text on #A6A6A6 without careful contrast checking.
  • Small text should always have the highest contrast; use #A6A6A6 on #1F1F1F for maximum readability.
  • Consider adding a single, vibrant accent color (not from this palette) for interactive elements if WCAG AAA contrast is a strict requirement.

Recommended combinations

Shadowed Depth

Creates a strong, layered background effect or distinct content sections in a dark interface.

#1F1F1F · #3A3A3A · #5C5C5C

Subtle Contrast

Ideal for typography hierarchies, differentiating headings from body text, or for subtle UI elements.

#3A3A3A · #808080 · #A6A6A6

Ethereal Glow

Use #1F1F1F as a dark background with #A6A6A6 for primary text and #808080 for secondary information or details.

#1F1F1F · #A6A6A6 · #808080

CSS variables

:root {
  --gothic-cathedral-shadow-1: #1F1F1F;
  --gothic-cathedral-shadow-2: #3A3A3A;
  --gothic-cathedral-shadow-3: #5C5C5C;
  --gothic-cathedral-shadow-4: #808080;
  --gothic-cathedral-shadow-5: #A6A6A6;
}

Tailwind config

theme: {
  extend: {
    colors: {
      "gothic-cathedral-shadow": {
        1: "#1F1F1F",
        2: "#3A3A3A",
        3: "#5C5C5C",
        4: "#808080",
        5: "#A6A6A6",
      }
    }
  }
}

Related searches

dark grey monochrome palettesgothic architecture color schemeselegant dark ui design colorsminimalist shadow palettesophisticated grey branding colors

Palette colors

Hex values

Color 1#1F1F1F
·
Color 2#3A3A3A
·
Color 3#5C5C5C
·
Color 4#808080
·
Color 5#A6A6A6
·

Accessibility

Contrast checker

1
2
3
4
5
1
1.4:1Fail
2.5:1Fail
4.2:1AA18
6.8:1AA
2
1.4:1Fail
1.7:1Fail
2.9:1Fail
4.7:1AA
3
2.5:1Fail
1.7:1Fail
1.7:1Fail
2.7:1Fail
4
4.2:1AA18
2.9:1Fail
1.7:1Fail
1.6:1Fail
5
6.8:1AA
4.7:1AA
2.7:1Fail
1.6:1Fail

Similar palettes

More like Gothic Cathedral Shadow

View all dark
Gothic Cathedral Glint
Black Rose Bloom
Enigmatic Shadow Tale
Gothic Bloom Reverie
Gothic Cathedral Stain
Gothic Cathedral Whisper