Back to palettes

Palette

Gothic Stone Whisper

A somber yet elegant collection of cool greys and dark slates, inspired by ancient cathedrals.

darkdark5 colors
More dark palettes

Preview

See it in context.

Interface

New

Ready when you are.

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

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

Data visualization

#2F4F4F#696969#708090#A9A9A9#D3D3D3

Palette guide

How to use Gothic Stone Whisper

Overview

The Gothic Stone Whisper palette offers a sophisticated collection of cool greys and dark slates, perfect for evoking a sense of ancient elegance and somber beauty. With shades like the deep slate gray of #2F4F4F, the versatile #708090 (light slate gray), and the soft #D3D3D3 (light grey), this palette is ideal for projects requiring a mature, understated aesthetic. Designers and developers can leverage its monochromatic harmony to create impactful, minimalist designs. It's particularly effective for architectural themes, luxury branding, or digital interfaces that demand a serious yet refined tone, ensuring a cohesive and professional visual experience.

Best used for

  • Luxury brand identity and packaging
  • Architectural firm websites and portfolios
  • Minimalist UI/UX design for sophisticated applications
  • Editorial design for art and history publications
  • High-end product photography backdrops
  • Corporate branding with a serious, established feel

Suggested color roles

primary

Use #2F4F4F as the dominant brand color for headers, main calls-to-action, or large background sections to establish a deep, foundational tone.

secondary

Apply #696969 or #708090 for supporting elements like secondary navigation, subheadings, or background panels, providing depth and variation without stark contrast.

accent

Utilize #A9A9A9 sparingly for subtle highlights, interactive states, or decorative details where a touch of muted brightness is needed against darker tones.

background

Employ #D3D3D3 for clean, readable backgrounds, or #A9A9A9 for a slightly darker, more textured canvas, offering a soft base for content.

text

For optimal readability on lighter backgrounds like #D3D3D3, use a deep charcoal or black. On darker backgrounds like #2F4F4F, use #D3D3D3 or a pure white for clear contrast.

Accessibility notes

  • Ensure sufficient contrast when pairing #696969 text on #A9A9A9 backgrounds for readability, especially for body text.
  • Prioritize using #2F4F4F or similar dark tones for text on light backgrounds like #D3D3D3 to meet WCAG AA standards.
  • Avoid low-contrast combinations like #708090 text on #696969 backgrounds, which can be challenging for users with visual impairments.
  • Use #D3D3D3 or pure white for critical UI elements like buttons or links when placed on #2F4F4F to ensure they stand out clearly.

Recommended combinations

Deep Foundation

Ideal for strong branding statements; #2F4F4F as primary, #696969 for secondary elements, and #D3D3D3 for text or highlights.

#2F4F4F · #696969 · #D3D3D3

Muted Elegance

Creates a softer, more atmospheric feel; #708090 for backgrounds, #A9A9A9 for accents, and #2F4F4F for high-contrast text.

#708090 · #A9A9A9 · #2F4F4F

Subtle Contrast

Excellent for minimalist layouts where a gentle progression of shades is desired, with #D3D3D3 as base and #696969 for details.

#D3D3D3 · #A9A9A9 · #696969

CSS variables

:root {
  --gothic-stone-whisper-1: #2F4F4F;
  --gothic-stone-whisper-2: #696969;
  --gothic-stone-whisper-3: #708090;
  --gothic-stone-whisper-4: #A9A9A9;
  --gothic-stone-whisper-5: #D3D3D3;
}

Tailwind config

theme: {
  extend: {
    colors: {
      "gothic-stone-whisper": {
        1: "#2F4F4F",
        2: "#696969",
        3: "#708090",
        4: "#A9A9A9",
        5: "#D3D3D3",
      }
    }
  }
}

Related searches

dark grey color schemesmoody architectural paletteselegant stone grey colorsmonochromatic slate designsophisticated neutral palette

Palette colors

Hex values

Color 1#2F4F4F
·
Color 2#696969
·
Color 3#708090
·
Color 4#A9A9A9
·
Color 5#D3D3D3
·

Accessibility

Contrast checker

1
2
3
4
5
1
1.6:1Fail
2.2:1Fail
3.8:1AA18
6:1AA
2
1.6:1Fail
1.4:1Fail
2.3:1Fail
3.7:1AA18
3
2.2:1Fail
1.4:1Fail
1.7:1Fail
2.7:1Fail
4
3.8:1AA18
2.3:1Fail
1.7:1Fail
1.6:1Fail
5
6:1AA
3.7:1AA18
2.7:1Fail
1.6:1Fail

Similar palettes

More like Gothic Stone Whisper

View all dark
Cathedral Shadow Grey
Gothic Stone Chapel
Dark Academia Ink
Gothic Cathedral Stone
Gothic Chapel Stone
Gothic Library Gloom