Palette

Gothic Revival Vault

A sophisticated spectrum of deep greys, reflecting the dramatic shadows of a gothic cathedral.

darkdark5 colors

More dark palettes

Preview

See it in context.

Interface

New

Ready when you are.

A quick look at how Gothic Revival Vault 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 Revival Vault.

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

Data visualization

#2A2A2A#4B4B4B#707070#A0A0A0#1A1A1A

Palette guide

How to use Gothic Revival Vault

Overview

The Gothic Revival Vault palette offers a sophisticated spectrum of deep greys, perfect for evoking a dramatic, architectural mood. Dominated by shades like the foundational #1A1A1A and the rich #2A2A2A, this monochrome collection is ideal for designers and developers aiming for elegance and gravitas. Its range extends to the versatile #4B4B4B and the lighter #707070, providing ample depth for subtle transitions and intricate detailing. This palette, inspired by the dramatic shadows of gothic cathedrals, ensures a cohesive and luxurious aesthetic, perfect for projects requiring a mature, understated visual impact. Use #A0A0A0 for highlights to maintain clarity against the darker tones.

Best used for

High-end luxury brand websites and applications
Architectural firm portfolios and presentations
Sophisticated dark mode UI designs
Art gallery or museum digital experiences
E-commerce platforms for premium products
Elegant editorial layouts and publishing

Suggested color roles

primary

#1A1A1A - Serves as the deep, foundational anchor, ideal for large backgrounds or dominant structural elements, setting a profound, luxurious tone.

secondary

#2A2A2A - A slightly softer dark grey, perfect for secondary sections, navigation bars, or panels, adding depth without overwhelming.

accent

#A0A0A0 - A light, clear grey used sparingly for highlights, interactive elements, or subtle calls to action, providing crucial contrast.

background

#1A1A1A - Establishes a truly dark, immersive canvas, making other elements pop with subtle elegance and depth.

text

#A0A0A0 - Recommended for body text on dark backgrounds like #1A1A1A or #2A2A2A, ensuring readability. For headings, a brighter white can be used.

Accessibility notes

Ensure sufficient contrast (WCAG AA or AAA) when placing lighter greys like #A0A0A0 on darker ones such as #1A1A1A or #2A2A2A for text.
Use #A0A0A0 or #707070 for body text against the darkest backgrounds to maintain readability, especially for longer content.
Avoid using #4B4B4B on #2A2A2A for small text, as the contrast might be insufficient for accessibility standards.
Consider a pure white for critical headings or calls to action against #1A1A1A to maximize visual impact and readability for all users.

Recommended combinations

Deep Contrast

Ideal for high-contrast UI elements, dark mode primary layouts with clear text and subtle accents.

#1A1A1A · #A0A0A0 · #707070

Subtle Depth

Excellent for secondary sections, cards, or panels where a softer, layered dark aesthetic is desired.

#2A2A2A · #4B4B4B · #A0A0A0

Architectural

Best for creating a sense of deep architectural space, where #707070 highlights structural lines or key details.

#1A1A1A · #2A2A2A · #707070

CSS variables

:root {
  --gothic-revival-vault-1: #2A2A2A;
  --gothic-revival-vault-2: #4B4B4B;
  --gothic-revival-vault-3: #707070;
  --gothic-revival-vault-4: #A0A0A0;
  --gothic-revival-vault-5: #1A1A1A;
}

Tailwind config

theme: {
  extend: {
    colors: {
      "gothic-revival-vault": {
        1: "#2A2A2A",
        2: "#4B4B4B",
        3: "#707070",
        4: "#A0A0A0",
        5: "#1A1A1A",
      }
    }
  }
}

Hex values

Color 1#2A2A2A

Color 2#4B4B4B

Color 3#707070

Color 4#A0A0A0

Color 5#1A1A1A

Accessibility

Contrast checker

1.6:1Fail

2.9:1Fail

5.5:1AA

1.2:1Fail

1.6:1Fail

1.8:1Fail

3.3:1AA18

2:1Fail

2.9:1Fail

1.8:1Fail

1.9:1Fail

3.5:1AA18

5.5:1AA

3.3:1AA18

1.9:1Fail

6.7:1AA

1.2:1Fail

2:1Fail

3.5:1AA18

6.7:1AA

Similar palettes

More like Gothic Revival Vault