Palette

Gothic Chapel Stone

A stark, majestic monochrome evoking the solemn grandeur of ancient gothic chapel stone.

darkdark5 colors

More dark palettes

Preview

See it in context.

Interface

New

Ready when you are.

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

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

Data visualization

#282828#4F4F4F#787878#A0A0A0#C8C8C8

Palette guide

How to use Gothic Chapel Stone

Overview

The Gothic Chapel Stone palette offers a stark, majestic monochrome, evoking the solemn grandeur of ancient gothic chapel stone. This spectrum ranges from a deep, anchoring black-grey (#282828) through a series of progressively lighter greys (#4F4F4F, #787878, #A0A0A0) to a luminous light grey (#C8C8C8). This palette is incredibly versatile for designers and developers seeking a clean, sophisticated, and serious aesthetic. It's ideal for projects that require a sense of timelessness, minimalist elegance, or a strong architectural foundation, providing a solid and dignified visual presence.

Best used for

Minimalist web design and UI/UX
Architectural firm branding and portfolios
Solemn corporate communications
Digital photography backdrops
Historical documentaries and museum exhibits
Elegant print materials and stationery

Suggested color roles

primary

Use #282828 as the main background or foundational element for a powerful, deep black-grey anchor.

secondary

Apply #4F4F4F for secondary content areas, panels, or large text, offering a strong, reliable mid-dark grey.

accent

Introduce #C8C8C8 sparingly for delicate highlights, thin borders, or subtle interactive states, providing a crisp, light contrast.

background

Utilize #A0A0A0 for versatile, balanced backgrounds that offer a neutral canvas, or #C8C8C8 for a brighter, airy feel.

text

For optimal readability, use #282828 or a dark charcoal on lighter backgrounds like #A0A0A0 or #C8C8C8. On darker shades, use white or #C8C8C8.

Accessibility notes

Text in #282828 on #C8C8C8 provides excellent contrast and readability.
Ensure sufficient contrast for text on #787878 and #A0A0A0; black or very dark grey is recommended.
White or #C8C8C8 text is essential when using #282828 or #4F4F4F as a background.
Avoid using #4F4F4F as text on #787878 due to low contrast.

Recommended combinations

Stark Contrast

Ideal for hero sections or main navigation, creating a dramatic visual hierarchy with strong light and dark contrasts.

#282828 · #C8C8C8 · #787878

Subtle Gradient

Perfect for backgrounds or layered UI elements, offering a smooth, sophisticated transition between mid-tone greys.

#4F4F4F · #787878 · #A0A0A0

Architectural Base

Use for content blocks or detailed sections, combining a deep base with a balanced mid-tone and a lighter supporting grey.

#282828 · #A0A0A0 · #4F4F4F

CSS variables

:root {
  --gothic-chapel-stone-1: #282828;
  --gothic-chapel-stone-2: #4F4F4F;
  --gothic-chapel-stone-3: #787878;
  --gothic-chapel-stone-4: #A0A0A0;
  --gothic-chapel-stone-5: #C8C8C8;
}

Tailwind config

theme: {
  extend: {
    colors: {
      "gothic-chapel-stone": {
        1: "#282828",
        2: "#4F4F4F",
        3: "#787878",
        4: "#A0A0A0",
        5: "#C8C8C8",
      }
    }
  }
}

Hex values

Color 1#282828

Color 2#4F4F4F

Color 3#787878

Color 4#A0A0A0

Color 5#C8C8C8

Accessibility

Contrast checker

1.8:1Fail

3.3:1AA18

5.6:1AA

8.8:1AAA

1.8:1Fail

1.9:1Fail

3.1:1AA18

4.9:1AA

3.3:1AA18

1.9:1Fail

1.7:1Fail

2.6:1Fail

5.6:1AA

3.1:1AA18

1.7:1Fail

1.6:1Fail

8.8:1AAA

4.9:1AA

2.6:1Fail

1.6:1Fail

Similar palettes

More like Gothic Chapel Stone

View all dark

Cathedral Shadow Grey

Cosmic Void Depths

Gothic Cathedral Stone

Gothic Library Arch

Gothic Library Dust

Gothic Library Gloom