Palette

Gothic Cathedral Stone

Deep, solemn greys and blues mirroring the grand, imposing architecture of ancient gothic cathedrals.

darkdark5 colors

More dark palettes

Preview

See it in context.

Interface

New

Ready when you are.

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

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

Data visualization

#36454F#5A5A5A#778899#A9A9A9#2C3539

Palette guide

How to use Gothic Cathedral Stone

Overview

The Gothic Cathedral Stone palette presents a collection of deep, solemn greys and blues, perfectly mirroring the grand, imposing architecture of ancient cathedrals. This palette features a profound blue-grey (#36454F) as its anchor, complemented by versatile medium greys (#5A5A5A, #778899) and a lighter, antique grey (#A9A9A9). A deeper, more intense blue-grey (#2C3539) adds further gravity and contrast. This scheme is invaluable for designers and developers aiming to create environments with a serious, historical, or classic UI feel, ensuring a dignified and timeless visual presence.

Best used for

Historical documentary interfaces
Solemn corporate or institutional branding
Architectural visualization and portfolios
Dark mode UI themes for applications
Game environments depicting ancient ruins
Classic and sophisticated web design

Suggested color roles

primary

Employ #36454F as the dominant color for backgrounds or large sections, providing a robust and serious foundation.

secondary

Use #5A5A5A for secondary elements, panels, or borders, offering a neutral yet strong supporting grey.

accent

Apply #2C3539 sparingly for subtle emphasis on important text or small UI controls, providing a slightly darker, profound accent.

background

Leverage #A9A9A9 for lighter background areas or as a base for content, creating a stony, antique appearance.

text

For readability, use #36454F or #2C3539 on lighter backgrounds like #A9A9A9. On darker shades, use white or a very light grey.

Accessibility notes

Ensure text using #778899 on #A9A9A9 meets contrast standards for readability.
White or very light grey text is essential on #36454F, #5A5A5A, and #2C3539.
The lightest color, #A9A9A9, offers good contrast for dark text but may require larger text sizes for #778899.
Avoid pairing #5A5A5A with #778899 for small text due to potentially low contrast.

Recommended combinations

Deep Foundations

Excellent for primary content blocks or headers, layering the deepest tones for a sense of solid, ancient structure.

#36454F · #2C3539 · #5A5A5A

Stony Contrast

Ideal for content areas, using the light grey as a background with contrasting dark text and mid-tone accents.

#A9A9A9 · #36454F · #778899

Monochrome Depth

Create a subtle gradient or textured effect for backgrounds or larger UI elements, offering a nuanced grey scale.

#5A5A5A · #778899 · #A9A9A9

CSS variables

:root {
  --gothic-cathedral-stone-1: #36454F;
  --gothic-cathedral-stone-2: #5A5A5A;
  --gothic-cathedral-stone-3: #778899;
  --gothic-cathedral-stone-4: #A9A9A9;
  --gothic-cathedral-stone-5: #2C3539;
}

Tailwind config

theme: {
  extend: {
    colors: {
      "gothic-cathedral-stone": {
        1: "#36454F",
        2: "#5A5A5A",
        3: "#778899",
        4: "#A9A9A9",
        5: "#2C3539",
      }
    }
  }
}

Hex values

Color 1#36454F

Color 2#5A5A5A

Color 3#778899

Color 4#A9A9A9

Color 5#2C3539

Accessibility

Contrast checker

1.4:1Fail

2.7:1Fail

4.2:1AA18

1.3:1Fail

1.4:1Fail

1.9:1Fail

2.9:1Fail

1.8:1Fail

2.7:1Fail

1.9:1Fail

1.5:1Fail

3.4:1AA18

4.2:1AA18

2.9:1Fail

1.5:1Fail

5.3:1AA

1.3:1Fail

1.8:1Fail

3.4:1AA18

5.3:1AA

Similar palettes

More like Gothic Cathedral Stone

View all dark

Cathedral Shadow Grey

Gothic Castle Stone

Gothic Cathedral Glint

Gothic Chapel Stone

Gothic Library Dust

Gothic Library Gloom