Palette

Cathedral Shadow Grey

Echoes the imposing grandeur and shadowed depths of ancient Gothic cathedrals and their stone facades.

darkdark5 colors

More dark palettes

Preview

See it in context.

Interface

New

Ready when you are.

A quick look at how Cathedral Shadow Grey 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 Cathedral Shadow Grey.

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

Data visualization

#2F3640#5B6B7C#8C9BAB#C5D0DC#1F252C

Palette guide

How to use Cathedral Shadow Grey

Overview

The "Cathedral Shadow Grey" palette echoes the imposing grandeur and shadowed depths of ancient Gothic cathedrals and their stone facades. It features a very dark slate #2F3640, a deep steel blue-gray #5B6B7C, a balanced medium gray #8C9BAB, a light cool gray #C5D0DC, and an even darker charcoal #1F252C. This sophisticated and robust monochrome combination is perfect for designs that aim for a serious, architectural, or minimalist aesthetic. Designers can leverage these hex codes for corporate branding, dark mode interfaces, or elegant editorial layouts. Developers will find this palette ideal for applications requiring a strong, grounded, and subtly mysterious user experience.

Best used for

Corporate branding and websites
Architectural portfolios
Dark mode UI/UX design
Minimalist digital interfaces
High-tech product design
Editorial design for serious topics

Suggested color roles

primary

#2F3640 (Very Dark Slate) - A strong, foundational dark gray, excellent for main headings, important text, or key graphical elements, providing a solid anchor.

secondary

#5B6B7C (Deep Steel Blue-Gray) - A versatile gray that complements the primary, ideal for secondary information, navigation backgrounds, or content panels.

accent

#8C9BAB (Medium Gray) - A balanced, neutral gray that offers subtle contrast, perfect for borders, dividers, or subtle interactive elements, adding refinement.

background

#C5D0DC (Light Cool Gray) - A light, airy gray that offers a stable and spacious base, suitable for large content areas, evoking stone or concrete.

text

For dark text, #1F252C (Charcoal) is excellent on #C5D0DC and #8C9BAB. For light text, pure white or a very light gray like #F0F0F0 provides excellent contrast against #2F3640, #5B6B7C, and #1F252C.

Accessibility notes

#C5D0DC (Light Cool Gray) and #8C9BAB (Medium Gray) require dark text for sufficient contrast.
#2F3640, #5B6B7C, and #1F252C provide good contrast for white or very light text.
Maintain consistent text color choices for readability across different shades of gray.
Test all text and background pairings, especially for body text, to meet WCAG AA standards.

Recommended combinations

Stone Facade

For creating robust UI elements, dark mode backgrounds, or architectural renderings with a sense of depth.

#2F3640 · #5B6B7C · #8C9BAB

Shadowed Arch

Ideal for subtle natural accents, highlighting interactive elements, or creating a sense of layered depth in a design.

#1F252C · #C5D0DC · #5B6B7C

Gothic Minimalism

Excellent for showcasing distinct content sections, subtle branding, or creating graphic patterns with a serious, grounded aesthetic.

#8C9BAB · #2F3640 · #C5D0DC

CSS variables

:root {
  --cathedral-shadow-grey-1: #2F3640;
  --cathedral-shadow-grey-2: #5B6B7C;
  --cathedral-shadow-grey-3: #8C9BAB;
  --cathedral-shadow-grey-4: #C5D0DC;
  --cathedral-shadow-grey-5: #1F252C;
}

Tailwind config

theme: {
  extend: {
    colors: {
      "cathedral-shadow-grey": {
        1: "#2F3640",
        2: "#5B6B7C",
        3: "#8C9BAB",
        4: "#C5D0DC",
        5: "#1F252C",
      }
    }
  }
}

Hex values

Color 1#2F3640

Color 2#5B6B7C

Color 3#8C9BAB

Color 4#C5D0DC

Color 5#1F252C

Accessibility

Contrast checker

2.2:1Fail

4.3:1AA18

7.8:1AAA

1.3:1Fail

2.2:1Fail

1.9:1Fail

3.5:1AA18

2.8:1Fail

4.3:1AA18

1.9:1Fail

1.8:1Fail

5.4:1AA

7.8:1AAA

3.5:1AA18

1.8:1Fail

9.9:1AAA

1.3:1Fail

2.8:1Fail

5.4:1AA

9.9:1AAA

Similar palettes

More like Cathedral Shadow Grey

View all dark

Gothic Cathedral Stone

Gothic Cathedral Glint