Palette

Gothic Stone Hearth

Somber and solid, inspired by the enduring grays of ancient Gothic stone structures.

monochromedark5 colors

More monochrome palettes

Preview

See it in context.

Interface

New

Ready when you are.

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

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

Data visualization

#2A2A2A#4E4E4E#7A7A7A#B4B4B4#1E1E1E

Palette guide

How to use Gothic Stone Hearth

Overview

The Gothic Stone Hearth palette offers a robust and sophisticated range of dark greys, evoking the timeless strength of ancient architectural marvels. Anchored by the profound depth of #1E1E1E and #2A2A2A, this monochrome collection provides a solid foundation for designs demanding elegance and gravitas. From the balanced mid-tone of #4E4E4E to the inviting softness of #7A7A7A and the bright highlight of #B4B4B4, designers and developers can craft visually impactful interfaces and branding. This palette is ideal for creating moody, luxurious, or industrial aesthetics, ensuring a cohesive and distinguished visual experience across various applications and digital platforms.

Best used for

High-end luxury branding
Architectural firm portfolios
Dark mode user interfaces (UI)
Sophisticated website design
Industrial-chic interior design concepts
Luxury product packaging

Suggested color roles

primary

#2A2A2A - A deep, versatile charcoal for main content areas or dominant brand elements, providing a strong, elegant base.

secondary

#4E4E4E - A balanced medium-dark grey, perfect for secondary navigation, card backgrounds, or subtle panel separations.

accent

#7A7A7A - A lighter, yet still substantial grey, ideal for interactive elements, hover states, or to add a touch of subtle contrast without harshness.

background

#1E1E1E - The darkest shade, providing an immersive, deep canvas for a truly moody and sophisticated aesthetic.

text

#B4B4B4 - A light grey that offers excellent readability against the darker shades, ensuring clear text on backgrounds like #1E1E1E or #2A2A2A.

Accessibility notes

Ensure #B4B4B4 text maintains sufficient contrast against all darker background shades, especially #7A7A7A.
Avoid using #4E4E4E text on #2A2A2A backgrounds for body copy; reserve for larger titles.
For critical information, consider pairing #B4B4B4 text with #1E1E1E or #2A2A2A for optimal readability.
Increase font size or weight for any text using lower contrast pairings to enhance legibility.

Recommended combinations

Deep Contrast

Ideal for dark mode interfaces where #1E1E1E forms the background, #4E4E4E defines cards, and #B4B4B4 is used for primary text.

#1E1E1E · #4E4E4E · #B4B4B4

Subtle Depth

Great for sophisticated branding, where #2A2A2A is the main brand color, #7A7A7A highlights secondary information, and #B4B4B4 provides clear, elegant text.

#2A2A2A · #7A7A7A · #B4B4B4

Architectural Focus

Excellent for presenting design portfolios or industrial themes, using #4E4E4E as a base, #2A2A2A for strong headings, and #7A7A7A for subtle details.

#4E4E4E · #2A2A2A · #7A7A7A

CSS variables

:root {
  --gothic-stone-hearth-1: #2A2A2A;
  --gothic-stone-hearth-2: #4E4E4E;
  --gothic-stone-hearth-3: #7A7A7A;
  --gothic-stone-hearth-4: #B4B4B4;
  --gothic-stone-hearth-5: #1E1E1E;
}

Tailwind config

theme: {
  extend: {
    colors: {
      "gothic-stone-hearth": {
        1: "#2A2A2A",
        2: "#4E4E4E",
        3: "#7A7A7A",
        4: "#B4B4B4",
        5: "#1E1E1E",
      }
    }
  }
}

Hex values

Color 1#2A2A2A

Color 2#4E4E4E

Color 3#7A7A7A

Color 4#B4B4B4

Color 5#1E1E1E

Accessibility

Contrast checker

1.7:1Fail

3.3:1AA18

6.9:1AA

1.2:1Fail

1.7:1Fail

1.9:1Fail

4:1AA18

2:1Fail

3.3:1AA18

1.9:1Fail

2.1:1Fail

3.9:1AA18

6.9:1AA

4:1AA18

2.1:1Fail

8:1AAA

1.2:1Fail

2:1Fail

3.9:1AA18

8:1AAA

Similar palettes

More like Gothic Stone Hearth

View all monochrome

Charcoal Smoke Hues

Gothic Cathedral Stone

Velveteen Shadow Play

Ancient Tomb Relic

Basalt Column Grey

Basalt Pillar Shades