Palette

Gothic Revival Arch

Deep, atmospheric tones inspired by the solemn grandeur and intricate details of Gothic architecture.

darkelegant5 colors

More dark palettes

Preview

See it in context.

Interface

New

Ready when you are.

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

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

Data visualization

#2F4F4F#483C32#696969#778899#B0C4DE

Palette guide

How to use Gothic Revival Arch

Overview

The "Gothic Revival Arch" palette offers a sophisticated journey into deep, atmospheric tones, perfect for projects seeking an elegant and historic aesthetic. Inspired by solemn grandeur and intricate architectural details, this cool, dark color scheme features a compelling blend of deep greenish-gray #2F4F4F, earthy brown-gray #483C32, and a serene light blue-gray #B0C4DE. Complementing these are versatile mid-grays like #696969 and #778899, providing crucial depth and balance. Designers and developers can leverage this palette to evoke a sense of timelessness and refined mystery, making it ideal for high-end branding, digital interfaces, or artistic representations where a stately, contemplative mood is desired.

Best used for

Luxury brand identity and packaging
Historical museum exhibits or documentaries
High-end website and app UI themes
Interior design concepts for sophisticated spaces
Artistic installations and digital art
Fashion collections with an elegant, subdued mood

Suggested color roles

primary

Use #2F4F4F as a dominant, anchoring color for large sections or main brand elements, providing a deep, elegant foundation.

secondary

Employ #483C32 for complementary panels, sub-headers, or dividing lines to add an earthy, warm contrast to the primary tone.

accent

Apply #B0C4DE sparingly for calls-to-action, interactive elements, or key highlights to create a luminous, ethereal focal point.

background

Utilize #696969 as a sophisticated, muted background for content areas, offering a dark yet legible canvas that enhances other palette colors.

text

For optimal readability on dark backgrounds, use #B0C4DE or a near-white for body text. For light backgrounds (like #B0C4DE), use #2F4F4F or a dark charcoal.

Accessibility notes

Ensure sufficient contrast when pairing mid-tones like #696969 with #778899; test for WCAG AA compliance, especially for text.
Pair the lightest color, #B0C4DE, with the darkest tones like #2F4F4F or #483C32 for maximum readability in body text.
Avoid using #696969 for small text on #778899 backgrounds; contrast might be insufficient for users with visual impairments.
Reserve #B0C4DE for critical information or interactive elements to ensure they stand out effectively against darker backgrounds.

Recommended combinations

Regal Contrast

Ideal for hero sections or prominent displays, where #2F4F4F provides depth, #B0C4DE offers a striking highlight, and #778899 adds subtle support.

#2F4F4F · #B0C4DE · #778899

Stone & Shadow

Excellent for creating a rich, textured appearance in backgrounds or complex data visualizations, evoking a sense of ancient stone and deep shadows.

#483C32 · #696969 · #2F4F4F

Ethereal Glow

Perfect for UI elements, navigation, or subtle iconography where #696969 acts as a soft base, contrasted by the ethereal #B0C4DE and gentle #778899.

#696969 · #B0C4DE · #778899

CSS variables

:root {
  --gothic-revival-arch-1: #2F4F4F;
  --gothic-revival-arch-2: #483C32;
  --gothic-revival-arch-3: #696969;
  --gothic-revival-arch-4: #778899;
  --gothic-revival-arch-5: #B0C4DE;
}

Tailwind config

theme: {
  extend: {
    colors: {
      "gothic-revival-arch": {
        1: "#2F4F4F",
        2: "#483C32",
        3: "#696969",
        4: "#778899",
        5: "#B0C4DE",
      }
    }
  }
}

Hex values

Color 1#2F4F4F

Color 2#483C32

Color 3#696969

Color 4#778899

Color 5#B0C4DE

Accessibility

Contrast checker

1.2:1Fail

1.6:1Fail

2.5:1Fail

5:1AA

1.2:1Fail

1.9:1Fail

2.9:1Fail

6:1AA

1.6:1Fail

1.9:1Fail

1.5:1Fail

3.1:1AA18

2.5:1Fail

2.9:1Fail

1.5:1Fail

2:1Fail

5:1AA

6:1AA

3.1:1AA18

2:1Fail

Similar palettes

More like Gothic Revival Arch

View all dark

Gothic Cathedral Glow

Art Deco Sapphire Gleam

Gala Night Shimmer

Gothic Revival Grandeur

Medieval Stained Glass

Moonbeam Twilight