Back to palettes

Palette

Gothic Cathedral Stone

Somber and majestic, evoking the ancient, weathered stone of a grand gothic edifice.

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

#4B4B4B#696969#808080#A9A9A9#D3D3D3

Palette guide

How to use Gothic Cathedral Stone

Overview

The "Gothic Cathedral Stone" palette offers a somber and majestic spectrum of grays, evoking the ancient, weathered stone of a grand gothic edifice. This monochrome collection ranges from a deep charcoal (#4B4B4B) to a light, almost ethereal gray (#D3D3D3), including a solid Dim Gray (#696969), a balanced Gray (#808080), and a luminous Dark Gray (#A9A9A9). It's an excellent choice for designers and developers aiming for a sophisticated, historical, and understated aesthetic. These hues provide a versatile foundation for creating depth, texture, and a refined user experience, perfect for projects that require timeless elegance and a strong, monumental presence.

Best used for

  • Historical society websites and publications
  • High-end minimalist interior design concepts
  • Architectural visualization and rendering
  • Classic menswear or luxury accessories branding
  • Photography portfolio websites
  • Sophisticated dark mode UI themes

Suggested color roles

primary

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

secondary

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

accent

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

background

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

text

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

Accessibility notes

  • Ensure high contrast for text by pairing #D3D3D3 or #A9A9A9 with #4B4B4B or #696969.
  • Avoid using #808080 for text on #A9A9A9 or #D3D3D3 without careful contrast checking.
  • Small text should always use the highest contrast pairings, such as #D3D3D3 on #4B4B4B.
  • If a specific interactive element needs more prominence, consider a single, high-contrast accent color outside this palette.

Recommended combinations

Stone Layers

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

#4B4B4B · #696969 · #808080

Highlighted Structure

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

#696969 · #A9A9A9 · #D3D3D3

Monumental Text

Use #4B4B4B as a deep background with #D3D3D3 for primary text and #A9A9A9 for secondary information or details.

#4B4B4B · #D3D3D3 · #A9A9A9

CSS variables

:root {
  --gothic-cathedral-stone-4-1: #4B4B4B;
  --gothic-cathedral-stone-4-2: #696969;
  --gothic-cathedral-stone-4-3: #808080;
  --gothic-cathedral-stone-4-4: #A9A9A9;
  --gothic-cathedral-stone-4-5: #D3D3D3;
}

Tailwind config

theme: {
  extend: {
    colors: {
      "gothic-cathedral-stone-4": {
        1: "#4B4B4B",
        2: "#696969",
        3: "#808080",
        4: "#A9A9A9",
        5: "#D3D3D3",
      }
    }
  }
}

Related searches

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

Palette colors

Hex values

Color 1#4B4B4B
·
Color 2#696969
·
Color 3#808080
·
Color 4#A9A9A9
·
Color 5#D3D3D3
·

Accessibility

Contrast checker

1
2
3
4
5
1
1.6:1Fail
2.2:1Fail
3.7:1AA18
5.8:1AA
2
1.6:1Fail
1.4:1Fail
2.3:1Fail
3.7:1AA18
3
2.2:1Fail
1.4:1Fail
1.7:1Fail
2.6:1Fail
4
3.7:1AA18
2.3:1Fail
1.7:1Fail
1.6:1Fail
5
5.8:1AA
3.7:1AA18
2.6:1Fail
1.6:1Fail

Similar palettes

More like Gothic Cathedral Stone

View all monochrome
Ancient Stone Altar
Ancient Tomb Relic
Gothic Cathedral Stone
Gothic Cathedral Stone
Gothic Stone Abbey
Noir Film Shadows