Back to palettes

Palette

Gothic Revival

Deep, solemn grays echoing the grandeur and mystery of historic Gothic architecture.

monochromedark5 colors
More monochrome palettes

Preview

See it in context.

Interface

New

Ready when you are.

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

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

Data visualization

#2B2B2B#3C3C3C#505050#646464#7B7B7B

Palette guide

How to use Gothic Revival

Overview

The Gothic Revival color palette offers a sophisticated and dramatic range of deep grays, perfect for projects seeking a solemn, historical, or luxurious feel. Dominated by hues like the almost-black #2B2B2B and the rich #3C3C3C, this monochrome collection evokes the grandeur and mystery of ancient cathedrals and architectural masterpieces. Developers will find these shades excellent for creating high-contrast, elegant interfaces or backgrounds that require depth without the harshness of pure black. The lighter #7B7B7B provides a crucial visual break, allowing for subtle gradients and sophisticated layering. This palette is ideal for conveying gravitas, professionalism, and a timeless aesthetic in digital and print designs.

Best used for

  • Luxury brand websites
  • Architectural portfolios
  • Historical documentary graphics
  • High-end fashion photography backdrops
  • Dark mode UI themes
  • Elegant print stationery

Suggested color roles

primary

#2B2B2B - Use as the foundational dark base for large areas, evoking depth and solemnity, similar to a main wall in a grand hall.

secondary

#3C3C3C - Excellent for secondary sections, navigation bars, or panels, providing a slight distinction from the primary while maintaining the dark mood.

accent

#646464 - A mid-tone gray that can highlight important elements or provide subtle contrast for active states without being too bright.

background

#2B2B2B - Ideal for a dramatic, immersive dark background, providing a canvas that makes lighter elements pop with understated elegance.

text

#7B7B7B - A lighter gray perfect for readable body text against darker backgrounds like #2B2B2B or #3C3C3C, ensuring clarity without starkness. Alternatively, use pure white for maximum readability on headlines.

Accessibility notes

  • Ensure sufficient contrast when using #7B7B7B for text on #2B2B2B; consider a brighter white for critical information.
  • Avoid using #646464 for small text on #505050 as contrast might be insufficient for WCAG AA standards.
  • Use a contrast checker tool for all text and interactive element pairings, especially within the mid-range grays.
  • Provide an option for users to switch to a lighter theme if the dark aesthetic proves challenging for extended reading.

Recommended combinations

Deep Foundations

Ideal for establishing a robust, dark base in web interfaces, with #2B2B2B as background, #3C3C3C for panels, and #505050 for subtle borders or inactive elements.

#2B2B2B · #3C3C3C · #505050

Subtle Contrast

Perfect for creating hierarchy and readability within content blocks; #3C3C3C for background, #646464 for headings, and #7B7B7B for body text.

#3C3C3C · #646464 · #7B7B7B

Architectural Accents

Use #2B2B2B as the primary canvas, #505050 for structural elements or dividers, and #7B7B7B for highlights or icons to mimic stone and light.

#2B2B2B · #505050 · #7B7B7B

CSS variables

:root {
  --gothic-revival-2-1: #2B2B2B;
  --gothic-revival-2-2: #3C3C3C;
  --gothic-revival-2-3: #505050;
  --gothic-revival-2-4: #646464;
  --gothic-revival-2-5: #7B7B7B;
}

Tailwind config

theme: {
  extend: {
    colors: {
      "gothic-revival-2": {
        1: "#2B2B2B",
        2: "#3C3C3C",
        3: "#505050",
        4: "#646464",
        5: "#7B7B7B",
      }
    }
  }
}

Related searches

dark gray color schemesmonochrome gothic palettearchitectural gray colorselegant dark UI colorshistorical grayscale design

Palette colors

Hex values

Color 1#2B2B2B
·
Color 2#3C3C3C
·
Color 3#505050
·
Color 4#646464
·
Color 5#7B7B7B
·

Accessibility

Contrast checker

1
2
3
4
5
1
1.3:1Fail
1.8:1Fail
2.4:1Fail
3.3:1AA18
2
1.3:1Fail
1.4:1Fail
1.9:1Fail
2.6:1Fail
3
1.8:1Fail
1.4:1Fail
1.4:1Fail
1.9:1Fail
4
2.4:1Fail
1.9:1Fail
1.4:1Fail
1.4:1Fail
5
3.3:1AA18
2.6:1Fail
1.9:1Fail
1.4:1Fail

Similar palettes

More like Gothic Revival

View all monochrome
Gothic Cathedral Stone
Basalt Pillar Shades
Licorice Drop
Midnight Ink Spill
Noir Film Shadows
Obsidian Shard Coast