Palette

Gothic Stone Abbey

Grayscale tones reminiscent of ancient, weathered stone walls and towering arches of a solemn Gothic abbey.

monochromedark5 colors

More monochrome palettes

Preview

See it in context.

Interface

New

Ready when you are.

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

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

Data visualization

#2D2D2D#4E4E4E#7D7D7D#A0A0A0#C2C2C2

Palette guide

How to use Gothic Stone Abbey

Overview

The Gothic Stone Abbey palette evokes the solemn grandeur of ancient architecture, utilizing a sophisticated range of grays. This monochrome collection, featuring deep tones like #2D2D2D and #4E4E4E alongside lighter shades such as #A0A0A0 and #C2C2C2, is perfect for projects requiring a sense of history, gravitas, and understated elegance. Designers can leverage its consistent value scale to create depth and texture without the distraction of color, making it ideal for backgrounds, UI elements, and imagery where a timeless, dark aesthetic is paramount. Developers will appreciate the predictable contrast for robust visual hierarchies.

Best used for

Historical documentary interfaces or branding
Luxury product websites with a dark theme
Architectural firm portfolios or presentations
Video game environments set in ancient ruins
Editorial design for art history or philosophy publications
Minimalist photography portfolios

Suggested color roles

primary

Use #2D2D2D as the dominant foundational color for large backgrounds or primary containers, establishing a deep, serious mood.

secondary

Employ #4E4E4E for secondary panels, navigation elements, or subtle dividers, providing a slightly softer yet still dark contrast to the primary.

accent

Apply #7D7D7D for subtle accents on interactive elements, borders, or iconography where a gentle lift from the darker tones is needed without being too bright.

background

The darkest #2D2D2D creates a rich, immersive background, while #4E4E4E can serve as a slightly less intense alternative for content blocks.

text

For body text, use #C2C2C2 or #A0A0A0 against darker backgrounds like #2D2D2D or #4E4E4E to ensure excellent readability. For lighter backgrounds, a near-black text is recommended.

Accessibility notes

Ensure sufficient contrast between text and background, e.g., #C2C2C2 text on #2D2D2D background.
Avoid placing #7D7D7D text on #A0A0A0 background due to insufficient contrast.
Use a tool to check WCAG compliance, especially for interactive elements and small text.
Provide alternative visual cues for states (e.g., focus, hover) beyond just a slight shade change.

Recommended combinations

Deep Foundation

Ideal for dark mode interfaces, with #2D2D2D as background, #4E4E4E for secondary elements, and #C2C2C2 for primary text.

#2D2D2D · #4E4E4E · #C2C2C2

Subtle Structure

Effective for card layouts or content blocks where #4E4E4E forms the base, #7D7D7D for borders, and #A0A0A0 for headlines.

#4E4E4E · #7D7D7D · #A0A0A0

Highlight & Read

Use #2D2D2D for the main canvas, #A0A0A0 for subheadings or secondary information, and #C2C2C2 for body text to maintain clear hierarchy.

#2D2D2D · #A0A0A0 · #C2C2C2

CSS variables

:root {
  --gothic-stone-abbey-1: #2D2D2D;
  --gothic-stone-abbey-2: #4E4E4E;
  --gothic-stone-abbey-3: #7D7D7D;
  --gothic-stone-abbey-4: #A0A0A0;
  --gothic-stone-abbey-5: #C2C2C2;
}

Tailwind config

theme: {
  extend: {
    colors: {
      "gothic-stone-abbey": {
        1: "#2D2D2D",
        2: "#4E4E4E",
        3: "#7D7D7D",
        4: "#A0A0A0",
        5: "#C2C2C2",
      }
    }
  }
}

Hex values

Color 1#2D2D2D

Color 2#4E4E4E

Color 3#7D7D7D

Color 4#A0A0A0

Color 5#C2C2C2

Accessibility

Contrast checker

1.7:1Fail

3.3:1AA18

5.3:1AA

7.7:1AAA

1.7:1Fail

2:1Fail

3.2:1AA18

4.7:1AA