Palette

Gothic Fortress Wall

A strong, imposing palette of cool, dark greys, evoking ancient stone fortresses and shadowed cathedrals.

DarkDark5 colors

More Dark palettes

Preview

See it in context.

Interface

New

Ready when you are.

A quick look at how Gothic Fortress Wall 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 Fortress Wall.

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

Data visualization

#36454F#5D6D7E#8A99A8#2C3841#ABB7C1

Palette guide

How to use Gothic Fortress Wall

Overview

The Gothic Fortress Wall palette is a strong, imposing collection of cool, dark greys, evoking ancient stone fortresses and shadowed cathedrals. It features a profound blue-black (#2C3841) as its anchor, complemented by robust dark greys (#36454F, #5D6D7E) and lighter, stony mid-tones (#8A99A8, #ABB7C1). This palette provides a sense of immense strength, durability, and historical significance, perfect for designers and developers aiming to create projects with a serious, grounded, or medieval-inspired aesthetic. It ensures a powerful and authoritative visual presence, reminiscent of enduring stone structures.

Best used for

Historical game environments and UI
Architectural visualization and portfolios
Robust corporate or security branding
Medieval reenactment themes and websites
Dark mode interfaces for serious applications
Durable product design and packaging

Suggested color roles

primary

Utilize #2C3841 as the dominant background or foundational element for a powerful, deep blue-black anchor.

secondary

Apply #36454F for secondary content areas, panels, or large text, offering a strong, reliable dark grey.

accent

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

background

The mid-tone #8A99A8 offers a versatile, balanced background that feels like weathered stone, or #ABB7C1 for a brighter base.

text

For optimal readability, use #2C3841 or a dark charcoal on lighter backgrounds like #ABB7C1 or #8A99A8. On darker shades, use white or #ABB7C1.

Accessibility notes

Text in #2C3841 on #ABB7C1 provides excellent contrast and readability.
Ensure sufficient contrast for text on #5D6D7E and #8A99A8; dark text is generally recommended.
White or #ABB7C1 text is essential when using #2C3841 or #36454F as a background.
Avoid pairing #5D6D7E as text on #8A99A8 due to potential low contrast.

Recommended combinations

Fortress Base

Ideal for primary content blocks or headers, layering the deepest tones for a sense of solid, imposing structure.

#2C3841 · #36454F · #5D6D7E

Stone Layers

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

#5D6D7E · #8A99A8 · #ABB7C1

Dramatic Contrast

Use for prominent call-to-action buttons or key information, leveraging strong contrast between the deepest base and a light accent.

#2C3841 · #ABB7C1 · #36454F

CSS variables

:root {
  --gothic-fortress-wall-1: #36454F;
  --gothic-fortress-wall-2: #5D6D7E;
  --gothic-fortress-wall-3: #8A99A8;
  --gothic-fortress-wall-4: #2C3841;
  --gothic-fortress-wall-5: #ABB7C1;
}

Tailwind config

theme: {
  extend: {
    colors: {
      "gothic-fortress-wall": {
        1: "#36454F",
        2: "#5D6D7E",
        3: "#8A99A8",
        4: "#2C3841",
        5: "#ABB7C1",
      }
    }
  }
}

Hex values

Color 1#36454F

Color 2#5D6D7E

Color 3#8A99A8

Color 4#2C3841

Color 5#ABB7C1

Accessibility

Contrast checker

1.9:1Fail

3.4:1AA18

1.2:1Fail

4.8:1AA

1.9:1Fail

1.8:1Fail

2.3:1Fail

2.6:1Fail

3.4:1AA18

1.8:1Fail

4.1:1AA18

1.4:1Fail

1.2:1Fail

2.3:1Fail

4.1:1AA18

5.9:1AA

4.8:1AA

2.6:1Fail

1.4:1Fail

5.9:1AA

Similar palettes

More like Gothic Fortress Wall

View all Dark

Gothic Nightshade Bloom

Midnight Velvet Gloom

Obsidian Night Stone

Volcanic Glass

Abyssal Bioluminescence

Abyssal Seaweed Garden