Back to palettes

Palette

Gothic Cathedral Stone

A somber yet grand palette inspired by the aged stones and shadowed corners of ancient cathedrals.

darkdark5 colors
More dark palettes

Preview

See it in context.

Interface

New

Ready when you are.

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

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

Data visualization

#2B2D42#8D99AE#B9C4D1#D9E0E7#6A5B6F

Palette guide

How to use Gothic Cathedral Stone

Overview

The Gothic Cathedral Stone palette offers a somber yet grand array of cool, historic shades perfect for evoking medieval architecture. Featuring a deep, anchoring blue-black (#2B2D42), alongside versatile mid-tones like the cool grey (#8D99AE) and lighter stone (#B9C4D1), this palette exudes a timeless elegance. A subtle, mysterious accent purple-grey (#6A5B6F) adds depth, while the near-white (#D9E0E7) serves as an excellent highlight or background. Designers and developers can leverage these hues for projects requiring a sophisticated, antique, or historically-inspired aesthetic, ensuring a cohesive and majestic visual experience.

Best used for

  • Historical website themes and UI/UX
  • Branding for luxury or heritage products
  • Environmental design for games or film
  • Architectural renderings and portfolios
  • Elegant print materials and invitations
  • Digital art with a medieval or fantasy aesthetic

Suggested color roles

primary

Use #2B2D42 as a foundational, deep anchor color for main sections or prominent UI elements, providing a strong sense of gravitas.

secondary

Apply #8D99AE for secondary panels, subheadings, or background elements, offering a balanced, cool mid-tone that complements the primary hue.

accent

Introduce #6A5B6F sparingly for subtle highlights, interactive states, or decorative details, adding a touch of mysterious warmth without overwhelming.

background

Utilize #D9E0E7 for clean, airy backgrounds, providing a light, stone-like canvas that allows darker elements to stand out with clarity.

text

For optimal readability, use #2B2D42 or a rich charcoal on light backgrounds like #D9E0E7. On darker shades, a crisp white or #D9E0E7 works best.

Accessibility notes

  • Ensure sufficient contrast when pairing #8D99AE or #B9C4D1 for text, especially on busy backgrounds.
  • Text in #2B2D42 on #D9E0E7 offers excellent readability and contrast.
  • Avoid using #6A5B6F as primary body text color on mid-tones unless contrast is verified.
  • The lightest color, #D9E0E7, is suitable for large text on dark backgrounds but may not pass AA for small text on all darker shades.

Recommended combinations

Grand Entrance

Ideal for header sections or hero images, establishing a strong, elegant contrast between deep darks and a light background.

#2B2D42 · #D9E0E7 · #8D99AE

Shadowed Arch

Perfect for secondary content blocks or detailed UI components, creating a harmonious blend of cool and subtly warm greys.

#8D99AE · #6A5B6F · #B9C4D1

Ancient Stone

Use for accenting navigation elements or creating visual hierarchy, combining deep, light, and unique mid-tones for a sophisticated look.

#2B2D42 · #B9C4D1 · #6A5B6F

CSS variables

:root {
  --gothic-cathedral-stone-6-1: #2B2D42;
  --gothic-cathedral-stone-6-2: #8D99AE;
  --gothic-cathedral-stone-6-3: #B9C4D1;
  --gothic-cathedral-stone-6-4: #D9E0E7;
  --gothic-cathedral-stone-6-5: #6A5B6F;
}

Tailwind config

theme: {
  extend: {
    colors: {
      "gothic-cathedral-stone-6": {
        1: "#2B2D42",
        2: "#8D99AE",
        3: "#B9C4D1",
        4: "#D9E0E7",
        5: "#6A5B6F",
      }
    }
  }
}

Related searches

gothic architecture color palettemedieval stone shadeshistoric cool grey schemesomber elegant design colorsancient cathedral aesthetic

Palette colors

Hex values

Color 1#2B2D42
·
Color 2#8D99AE
·
Color 3#B9C4D1
·
Color 4#D9E0E7
·
Color 5#6A5B6F
·

Accessibility

Contrast checker

1
2
3
4
5
1
4.7:1AA
7.6:1AAA
10.1:1AAA
2.1:1Fail
2
4.7:1AA
1.6:1Fail
2.2:1Fail
2.2:1Fail
3
7.6:1AAA
1.6:1Fail
1.3:1Fail
3.6:1AA18
4
10.1:1AAA
2.2:1Fail
1.3:1Fail
4.7:1AA
5
2.1:1Fail
2.2:1Fail
3.6:1AA18
4.7:1AA

Similar palettes

More like Gothic Cathedral Stone

View all dark
Cathedral Shadow Grey
Gothic Cathedral Stone
Gothic Stone Chapel
Gothic Stone Whisper
Nocturne Chapel Glow
Somber Abbey Stone