Palette

Gothic Revival

A sophisticated grayscale progression, evoking the stately elegance and subtle mystery of Gothic architecture.

darkdark5 colors

More dark 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

#262626#4D4D4D#7A7A7A#A3A3A3#CDCDCD

Palette guide

How to use Gothic Revival

Overview

The Gothic Revival palette offers a sophisticated grayscale progression, ideal for designs requiring understated elegance and a touch of historical drama. This collection of charcoal and light grays, including foundational #262626, supportive #4D4D4D, and luminous #CDCDCD, perfectly evokes the stately grandeur of Gothic architecture. Designers can leverage these tones to create a timeless, refined aesthetic that speaks to luxury and depth. Its monochromatic nature ensures harmony, making it a versatile choice for minimalist yet impactful visual communication. Consider #7A7A7A for subtle accents and #A3A3A3 for mid-tone balance.

Best used for

Luxury brand identity
High-end architectural portfolios
Minimalist website design
Formal event invitations
Abstract art and photography backdrops
Sophisticated dark mode interfaces

Suggested color roles

primary

Use #262626 as a deep, foundational anchor for backgrounds or primary text, conveying strength and seriousness.

secondary

Apply #4D4D4D for supportive elements, subheadings, or as a contrasting dark shade to add depth without harshness.

accent

Utilize #7A7A7A for subtle highlights, intricate details, or as a delicate border to introduce texture and visual interest.

background

Employ #CDCDCD for clean, bright backgrounds that offer excellent contrast, or #262626 for an immersive, dramatic dark canvas.

text

Pair #262626 for primary text on light backgrounds or a crisp white (e.g., #FFFFFF) on dark backgrounds like #4D4D4D for optimal readability.

Accessibility notes

Ensure sufficient contrast between #262626 text on #CDCDCD backgrounds for WCAG compliance.
Avoid using mid-tone grays like #7A7A7A or #A3A3A3 for small body text, especially on similar gray backgrounds.
Test readability of #CDCDCD text on darker grays like #4D4D4D; a brighter white might be needed.
Consider larger font sizes for text elements using #A3A3A3 to improve legibility on darker shades.

Recommended combinations

Deep Contrast

For a classic, high-contrast look, perfect for titles and main content areas.

#262626 · #CDCDCD · #A3A3A3

Subtle Layers

To create soft, atmospheric depth in backgrounds or graphical elements.

#4D4D4D · #7A7A7A · #A3A3A3

Modern Elegance

A balanced trio for sophisticated branding and user interface design.

#262626 · #CDCDCD · #4D4D4D

CSS variables

:root {
  --gothic-revival-1: #262626;
  --gothic-revival-2: #4D4D4D;
  --gothic-revival-3: #7A7A7A;
  --gothic-revival-4: #A3A3A3;
  --gothic-revival-5: #CDCDCD;
}

Tailwind config

theme: {
  extend: {
    colors: {
      "gothic-revival": {
        1: "#262626",
        2: "#4D4D4D",
        3: "#7A7A7A",
        4: "#A3A3A3",
        5: "#CDCDCD",
      }
    }
  }
}

Hex values

Color 1#262626

Color 2#4D4D4D

Color 3#7A7A7A

Color 4#A3A3A3

Color 5#CDCDCD

Accessibility

Contrast checker

1.8:1Fail

3.5:1AA18

6:1AA

9.5:1AAA

1.8:1Fail

2:1Fail

3.4:1AA18

5.3:1AA

3.5:1AA18

2:1Fail

1.7:1Fail

2.7:1Fail

6:1AA

3.4:1AA18

1.7:1Fail

1.6:1Fail

9.5:1AAA

5.3:1AA

2.7:1Fail

1.6:1Fail

Similar palettes

More like Gothic Revival

Black Shard Reflection

Charred Ember Still

Dark Academia Quiet