Back to palettes

Palette

Gothic Castle Stone

Stark grays and deep shadows evoke the formidable and mysterious presence of an ancient gothic castle.

darkdark5 colors
More dark palettes

Preview

See it in context.

Interface

New

Ready when you are.

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

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

Data visualization

#3B3B3B#5A5A5A#7D7D7D#9D9D9D#BCCDCF

Palette guide

How to use Gothic Castle Stone

Overview

The Gothic Castle Stone palette captures the formidable and mysterious presence of ancient architecture, featuring a range of stark grays and deep shadows. From the profound #3B3B3B and #5A5A5A to the solid #7D7D7D and #9D9D9D, it's accented by the subtle, almost ethereal #BCCDCF. This collection is perfect for designs that require a strong, imposing, and minimalist aesthetic. It evokes a sense of history, durability, and quiet grandeur, making it suitable for projects that benefit from a serious and sophisticated tone.

Best used for

  • Architectural visualization and design firms
  • Industrial or minimalist product branding
  • Historical documentaries or museum exhibits
  • Dark aesthetics in web design (e.g., portfolio sites)
  • Luxury watch or jewelry brands (emphasizing craftsmanship)
  • Gaming environments with ancient or dark themes

Suggested color roles

primary

Use #3B3B3B for foundational elements, headers, or dominant backgrounds, establishing a strong, anchoring presence.

secondary

Employ #5A5A5A or #7D7D7D for supporting sections, sidebars, or larger graphical elements, providing depth.

accent

Apply #BCCDCF for subtle highlights, delicate lines, or atmospheric touches, adding a hint of light and contrast.

background

Utilize #3B3B3B for a solid, imposing backdrop that allows lighter elements to stand out with gravitas.

text

For optimal readability on dark backgrounds like #3B3B3B, use white or a very light gray. For light backgrounds like #9D9D9D, use #3B3B3B or charcoal.

Accessibility notes

  • Ensure high contrast when pairing text with backgrounds, especially for gray-on-gray combinations.
  • White or very light gray text is essential on #3B3B3B to meet WCAG AA standards.
  • For text on #9D9D9D or #BCCDCF, use a dark gray like #3B3B3B to ensure readability.
  • Avoid using similar mid-tone grays for text and background; always aim for significant contrast.

Recommended combinations

Stone Wall

Create depth in layered backgrounds, textured elements, or step-by-step information displays.

#3B3B3B · #5A5A5A · #7D7D7D

Misty Morning

For subtle highlights, delicate UI elements, or to evoke a soft, atmospheric feel.

#9D9D9D · #BCCDCF · #5A5A5A

Castle Depth

A balanced combination for a sophisticated design, blending dark foundations with lighter accents.

#3B3B3B · #7D7D7D · #BCCDCF

CSS variables

:root {
  --gothic-castle-stone-1: #3B3B3B;
  --gothic-castle-stone-2: #5A5A5A;
  --gothic-castle-stone-3: #7D7D7D;
  --gothic-castle-stone-4: #9D9D9D;
  --gothic-castle-stone-5: #BCCDCF;
}

Tailwind config

theme: {
  extend: {
    colors: {
      "gothic-castle-stone": {
        1: "#3B3B3B",
        2: "#5A5A5A",
        3: "#7D7D7D",
        4: "#9D9D9D",
        5: "#BCCDCF",
      }
    }
  }
}

Related searches

gothic gray palettecastle stone colorsdark industrial schememysterious graysancient architecture palette

Palette colors

Hex values

Color 1#3B3B3B
·
Color 2#5A5A5A
·
Color 3#7D7D7D
·
Color 4#9D9D9D
·
Color 5#BCCDCF
·

Accessibility

Contrast checker

1
2
3
4
5
1
1.6:1Fail
2.7:1Fail
4.1:1AA18
6.8:1AA
2
1.6:1Fail
1.7:1Fail
2.5:1Fail
4.2:1AA18
3
2.7:1Fail
1.7:1Fail
1.5:1Fail
2.5:1Fail
4
4.1:1AA18
2.5:1Fail
1.5:1Fail
1.6:1Fail
5
6.8:1AA
4.2:1AA18
2.5:1Fail
1.6:1Fail

Similar palettes

More like Gothic Castle Stone

View all dark