Back to palettes

Palette

Gothic Manor Stone

A classic monochrome of cool greys, inspired by the ancient, weathered stones of a gothic manor.

darkdark5 colors
More dark palettes

Preview

See it in context.

Interface

New

Ready when you are.

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

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

Data visualization

#E6E6E6#BFBFBF#8C8C8C#5E5E5E#333333

Palette guide

How to use Gothic Manor Stone

Overview

The "Gothic Manor Stone" palette presents a sophisticated range of cool monochrome greys, echoing the timeless elegance of ancient architecture. Featuring shades from the airy #E6E6E6 to the deep, grounding #333333, this palette provides designers and developers with a versatile toolkit for creating refined and moody aesthetics. Mid-tones like #BFBFBF, #8C8C8C, and #5E5E5E offer excellent depth and textural opportunities, perfect for UI elements, typography, and atmospheric branding. It's an ideal choice for projects aiming to convey heritage, luxury, or understated professionalism, ensuring a cohesive and visually impactful user experience across various platforms.

Best used for

  • Luxury brand websites and applications
  • Architectural portfolios and design studio branding
  • High-end fashion or jewelry e-commerce platforms
  • Editorial layouts for art, history, or culture magazines
  • Dark mode UI themes requiring a sophisticated touch
  • Elegant event invitations and stationery

Suggested color roles

primary

#5E5E5E - A strong, grounding grey, excellent for main content areas, primary navigation, or substantial UI components that require stability and presence.

secondary

#8C8C8C - A versatile mid-grey, perfect for secondary navigation, card backgrounds, subtle dividers, or interactive states, providing balance without overpowering.

accent

#333333 - The deepest shade, used sparingly for strong call-to-action buttons, key headlines, or borders to add definitive contrast, weight, and visual impact.

background

#E6E6E6 - A light, airy grey that provides a soft, sophisticated canvas, allowing darker elements and text to stand out gracefully without harsh contrast.

text

#333333 - For body text on light backgrounds like #E6E6E6, offering excellent readability. For text on darker backgrounds (e.g., #5E5E5E or #333333), use #E6E6E6 or a near-white for optimal contrast.

Accessibility notes

  • Ensure sufficient contrast between #333333 text on #E6E6E6 background for WCAG AA compliance.
  • Avoid pairing #BFBFBF text on #8C8C8C background as contrast will likely be insufficient for readability.
  • Use #E6E6E6 for text on #5E5E5E or #333333 backgrounds to meet accessibility contrast standards.
  • Carefully test all text and interactive element contrasts, especially when using mid-range greys together.

Recommended combinations

Classic Contrast

Ideal for clean, high-contrast interfaces; #E6E6E6 as a bright background, #333333 for primary text, and #5E5E5E for main UI elements.

#E6E6E6 · #333333 · #5E5E5E

Subtle Depth

Great for layering UI elements, where #BFBFBF serves as a base, #8C8C8C for secondary containers, and #5E5E5E for accents or active states.

#BFBFBF · #8C8C8C · #5E5E5E

Dark Elegance

Effective for a sophisticated dark theme, with #333333 as a dominant background, #E6E6E6 for primary text, and #8C8C8C for secondary details or icons.

#333333 · #E6E6E6 · #8C8C8C

CSS variables

:root {
  --gothic-manor-stone-1: #E6E6E6;
  --gothic-manor-stone-2: #BFBFBF;
  --gothic-manor-stone-3: #8C8C8C;
  --gothic-manor-stone-4: #5E5E5E;
  --gothic-manor-stone-5: #333333;
}

Tailwind config

theme: {
  extend: {
    colors: {
      "gothic-manor-stone": {
        1: "#E6E6E6",
        2: "#BFBFBF",
        3: "#8C8C8C",
        4: "#5E5E5E",
        5: "#333333",
      }
    }
  }
}

Related searches

monochrome grey color schemeelegant stone palettegothic design colorsmoody grey brandingdark mode grey palette

Palette colors

Hex values

Color 1#E6E6E6
·
Color 2#BFBFBF
·
Color 3#8C8C8C
·
Color 4#5E5E5E
·
Color 5#333333
·

Accessibility

Contrast checker

1
2
3
4
5
1
1.5:1Fail
2.7:1Fail
5.2:1AA
10.1:1AAA
2
1.5:1Fail
1.8:1Fail
3.5:1AA18
6.9:1AA
3
2.7:1Fail
1.8:1Fail
1.9:1Fail
3.8:1AA18
4
5.2:1AA
3.5:1AA18
1.9:1Fail
1.9:1Fail
5
10.1:1AAA
6.9:1AA
3.8:1AA18
1.9:1Fail

Similar palettes

More like Gothic Manor Stone

View all dark
Cathedral Shadow Grey
Gothic Cathedral Glint
Gothic Cathedral Stone
Gothic Cloister Arch
Gothic Library Gloom
Gothic Library Quiet