Back to palettes

Palette

Gothic Cathedral Stone

The imposing, shadowed beauty of ancient stone cathedrals, rendered in powerful greys.

monochromedark5 colors
More monochrome 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

#2C2C2C#4F4F4F#7A7A7A#A0A0A0#C7C7C7

Palette guide

How to use Gothic Cathedral Stone

Overview

The "Gothic Cathedral Stone" palette captures the imposing, shadowed beauty of ancient stone cathedrals, rendered in powerful grays. This monochrome collection ranges from a deep near-black (#2C2C2C) to a lighter, ethereal gray (#C7C7C7), including a solid Dark Gray (#4F4F4F), a balanced Medium Gray (#7A7A7A), and a versatile Light Gray (#A0A0A0). Ideal for designers and developers seeking a robust, sophisticated, and dark aesthetic, these hues provide a strong foundation for creating depth, texture, and a refined user experience. It's perfect for projects demanding a sense of history, gravitas, and understated grandeur.

Best used for

  • Architectural visualization and portfolios
  • High-end minimalist product design
  • Dark mode interface design
  • Luxury brand identity with a strong, classic feel
  • Photography exhibition websites
  • Digital art platforms requiring a neutral, powerful backdrop

Suggested color roles

primary

#2C2C2C (Deep Charcoal) - Serves as a strong, grounding primary, excellent for backgrounds, headers, or foundational UI elements in a dark theme.

secondary

#4F4F4F (Dark Gray) - Provides a subtle contrast to the primary, suitable for panels, card backgrounds, or secondary content areas.

accent

#C7C7C7 (Light Gray) - Functions as an elegant accent, perfect for highlighting interactive elements, subtle borders, or hover states in a dark interface.

background

#2C2C2C (Deep Charcoal) - An excellent choice for a dark, immersive background, providing a canvas for lighter elements to stand out.

text

#C7C7C7 (Light Gray) - Highly legible against the darker grays, making it ideal for primary body text. #A0A0A0 can be used for secondary text.

Accessibility notes

  • Ensure high contrast for text by pairing #C7C7C7 or #A0A0A0 with #2C2C2C or #4F4F4F.
  • Avoid using #7A7A7A for text on #A0A0A0 or #C7C7C7 without careful contrast checking.
  • Small text should always use the highest contrast pairings, such as #C7C7C7 on #2C2C2C.
  • Consider a single, carefully chosen vibrant accent color (outside this palette) for key interactive elements if strict WCAG AAA compliance is needed.

Recommended combinations

Stone Layers

Creates a strong, layered effect for background sections, content blocks, or subtle UI depth in a dark theme.

#2C2C2C · #4F4F4F · #7A7A7A

Highlighted Structure

Ideal for typography hierarchies, distinguishing headings from body text, or for subtle interactive elements.

#4F4F4F · #A0A0A0 · #C7C7C7

Monumental Text

Use #2C2C2C as a deep background with #C7C7C7 for primary text and #A0A0A0 for secondary information or details.

#2C2C2C · #C7C7C7 · #A0A0A0

CSS variables

:root {
  --gothic-cathedral-stone-3-1: #2C2C2C;
  --gothic-cathedral-stone-3-2: #4F4F4F;
  --gothic-cathedral-stone-3-3: #7A7A7A;
  --gothic-cathedral-stone-3-4: #A0A0A0;
  --gothic-cathedral-stone-3-5: #C7C7C7;
}

Tailwind config

theme: {
  extend: {
    colors: {
      "gothic-cathedral-stone-3": {
        1: "#2C2C2C",
        2: "#4F4F4F",
        3: "#7A7A7A",
        4: "#A0A0A0",
        5: "#C7C7C7",
      }
    }
  }
}

Related searches

monochromatic grey web designdark stone aesthetic palettegothic architecture ui colorssophisticated dark mode themesclassic grey branding colors

Palette colors

Hex values

Color 1#2C2C2C
·
Color 2#4F4F4F
·
Color 3#7A7A7A
·
Color 4#A0A0A0
·
Color 5#C7C7C7
·

Accessibility

Contrast checker

1
2
3
4
5
1
1.7:1Fail
3.3:1AA18
5.3:1AA
8.3:1AAA
2
1.7:1Fail
1.9:1Fail
3.1:1AA18
4.8:1AA
3
3.3:1AA18
1.9:1Fail
1.6:1Fail
2.5:1Fail
4
5.3:1AA
3.1:1AA18
1.6:1Fail
1.5:1Fail
5
8.3:1AAA
4.8:1AA
2.5:1Fail
1.5:1Fail

Similar palettes

More like Gothic Cathedral Stone

View all monochrome
Gothic Revival
Ancient Tomb Relic
Gothic Cathedral Stone
Gothic Cathedral Stone
Shadowed Granite Depths
Volcanic Rock Ridge