Back to palettes

Palette

Gothic Stone Cloister

Deep grays and light stones capture the solemn grandeur and timeless elegance of ancient gothic cloisters.

DarkElegant5 colors
More Dark palettes

Preview

See it in context.

Interface

New

Ready when you are.

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

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

Data visualization

#212121#424242#616161#BDBDBD#E0E0E0

Palette guide

How to use Gothic Stone Cloister

Overview

The Gothic Stone Cloister palette evokes the solemn grandeur and timeless elegance of ancient architectural marvels. Dominated by a spectrum of deep grays and light stones, this sophisticated set includes the profound darkness of #212121, the balanced mid-tone of #616161, and the ethereal lightness of #E0E0E0. It's ideal for projects requiring a sense of history, gravitas, and refined simplicity. Designers can leverage #424242 for subtle contrasts, while #BDBDBD offers a versatile lighter gray for backgrounds or secondary elements. This palette provides a strong foundation for creating interfaces and designs that are both visually striking and inherently dignified, perfect for conveying a classic, monumental feel.

Best used for

  • Museum or historical institution websites
  • Luxury brand identity and packaging
  • Dark-themed UI designs for productivity apps
  • Architectural portfolios or real estate presentations
  • High-end editorial or literary web designs
  • Gaming interfaces for historical or fantasy genres

Suggested color roles

primary

#212121 (A profound, anchoring dark gray, perfect for dominant elements like main navigation, headers, or large content blocks where a strong, sophisticated presence is desired.)

secondary

#424242 (A robust mid-dark gray, excellent for subheadings, secondary navigation, or card backgrounds, offering depth without competing with the primary.)

accent

#BDBDBD (A versatile light gray, ideal for drawing subtle attention to interactive elements, highlights, or as a delicate border, providing contrast against darker tones.)

background

#E0E0E0 (A soft, near-white gray, creating a serene and spacious backdrop for content, ensuring readability while maintaining the palette's overall elegant mood.)

text

#212121 (For primary body text on light backgrounds like #E0E0E0, ensuring high contrast and legibility. For text on darker backgrounds, use #E0E0E0 or #BDBDBD.)

Accessibility notes

  • Ensure sufficient contrast when pairing #212121 or #424242 with lighter colors like #BDBDBD or #E0E0E0 for text.
  • Avoid using #616161 for small text on #424242 backgrounds, as contrast may be insufficient for WCAG AA.
  • Utilize #E0E0E0 as text color on #212121 or #424242 backgrounds for optimal readability in dark mode interfaces.
  • Reserve #BDBDBD for larger text or decorative elements when used on mid-tones like #616161 to prevent readability issues.

Recommended combinations

Monolithic Base

Excellent for creating a robust dark mode foundation; #212121 for background, #424242 for cards, and #E0E0E0 for text and icons.

#212121 · #424242 · #E0E0E0

Subtle Depth

Ideal for layered UI elements like nested menus or accordions, providing visual hierarchy through subtle tonal shifts without harsh contrasts.

#424242 · #616161 · #BDBDBD

Elegant Contrast

A classic light mode combination: #E0E0E0 as a clean background, #212121 for primary text, and #BDBDBD for secondary text or borders, conveying sophistication.

#E0E0E0 · #212121 · #BDBDBD

CSS variables

:root {
  --gothic-stone-cloister-1: #212121;
  --gothic-stone-cloister-2: #424242;
  --gothic-stone-cloister-3: #616161;
  --gothic-stone-cloister-4: #BDBDBD;
  --gothic-stone-cloister-5: #E0E0E0;
}

Tailwind config

theme: {
  extend: {
    colors: {
      "gothic-stone-cloister": {
        1: "#212121",
        2: "#424242",
        3: "#616161",
        4: "#BDBDBD",
        5: "#E0E0E0",
      }
    }
  }
}

Related searches

gothic gray color schemedark elegant palettestone inspired design colorsmonumental gray web designhistoric architecture color ideas

Palette colors

Hex values

Color 1#212121
·
Color 2#424242
·
Color 3#616161
·
Color 4#BDBDBD
·
Color 5#E0E0E0
·

Accessibility

Contrast checker

1
2
3
4
5
1
1.6:1Fail
2.6:1Fail
8.6:1AAA
12.2:1AAA
2
1.6:1Fail
1.6:1Fail
5.3:1AA
7.6:1AAA
3
2.6:1Fail
1.6:1Fail
3.3:1AA18
4.7:1AA
4
8.6:1AAA
5.3:1AA
3.3:1AA18
1.4:1Fail
5
12.2:1AAA
7.6:1AAA
4.7:1AA
1.4:1Fail

Similar palettes

More like Gothic Stone Cloister

View all Dark
Gothic Window Glaze
Stained Glass Hues
Baroque Night Grandeur
Deep Space Orchid
Gothic Cathedral Stain
Imperial Gemstone Array