Palette

Gargoyle Grey

A strong, somber palette drawing inspiration from ancient, weathered gargoyles and their stony facades.

neutraldark5 colors

More neutral palettes

Preview

See it in context.

Interface

New

Ready when you are.

A quick look at how Gargoyle Grey 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 Gargoyle Grey.

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

Data visualization

#36454F#5A6A78#8B9DAA#BFCAD1#2A3740

Palette guide

How to use Gargoyle Grey

Overview

The Gargoyle Grey palette is a robust and somber collection of greys, drawing inspiration from ancient, weathered stone and gothic architecture. This powerful palette ranges from the deep, almost black #2A3740 and #36454F, through the mid-tones of #5A6A78 and #8B9DAA, to the lighter, yet still muted, #BFCAD1. These colors create a solid, grounded, and sophisticated mood, ideal for designs that require a sense of permanence, strength, or a dramatic, understated elegance. Designers will find this palette excellent for conveying a serious, architectural, or industrial aesthetic, providing a strong foundation for any visual project.

Best used for

Architectural firm branding and website design
Luxury watch or jewelry display backgrounds
Cybersecurity or tech company interfaces
Gothic-themed game environments or book covers
Men's fashion and lifestyle branding
Industrial design concepts or product visuals

Suggested color roles

primary

Utilize #2A3740 or #36454F as a dominant background to establish a strong, dark, and sophisticated foundation.

secondary

Employ #5A6A78 for secondary sections, large text blocks, or UI elements, offering depth and excellent readability against lighter greys.

accent

Use #BFCAD1 sparingly for highlights, icons, or subtle borders to create contrast and draw attention to key elements.

background

#36454F provides a rich, dark background that grounds the design, suitable for impactful visual statements.

text

For optimal readability, pair dark greys like #2A3740 with a crisp white or #BFCAD1. For backgrounds like #BFCAD1, use #36454F for text.

Accessibility notes

The darker greys (#2A3740, #36454F) provide excellent contrast with lighter greys (#BFCAD1) and white, ensuring good readability for text.
Ensure sufficient contrast when using mid-tones like #5A6A78 for text on backgrounds like #8B9DAA; use a contrast checker.
White text on #2A3740 or #36454F will meet WCAG AA and AAA standards for most font sizes.
Avoid placing #8B9DAA text on #5A6A78 backgrounds for small text, as contrast might be borderline.

Recommended combinations

Stony Depth

Ideal for a strong, architectural feel in website footers or sophisticated branding.

#2A3740 · #5A6A78 · #BFCAD1

Weathered Facade

Excellent for conveying a sense of age and solidity in historical or industrial designs.

#36454F · #8B9DAA · #BFCAD1

Gothic Elegance

Suitable for dramatic backgrounds or UI elements requiring a dark, mysterious touch.

#5A6A78 · #2A3740 · #8B9DAA

CSS variables

:root {
  --gargoyle-grey-1: #36454F;
  --gargoyle-grey-2: #5A6A78;
  --gargoyle-grey-3: #8B9DAA;
  --gargoyle-grey-4: #BFCAD1;
  --gargoyle-grey-5: #2A3740;
}

Tailwind config

theme: {
  extend: {
    colors: {
      "gargoyle-grey": {
        1: "#36454F",
        2: "#5A6A78",
        3: "#8B9DAA",
        4: "#BFCAD1",
        5: "#2A3740",
      }
    }
  }
}

Hex values

Color 1#36454F

Color 2#5A6A78

Color 3#8B9DAA

Color 4#BFCAD1

Color 5#2A3740

Accessibility

Contrast checker

1.8:1Fail

3.5:1AA18

5.9:1AA

1.2:1Fail

1.8:1Fail

2:1Fail

3.3:1AA18

2.2:1Fail

3.5:1AA18

2:1Fail

1.7:1Fail

4.4:1AA18

5.9:1AA

3.3:1AA18

1.7:1Fail

7.3:1AAA

1.2:1Fail

2.2:1Fail

4.4:1AA18

7.3:1AAA

Similar palettes

More like Gargoyle Grey

View all neutral

Mossy Stone Relic

Ancient Temple Relic

Crumbled Castle Remnants

Haunted Library Pages

Moonlit Canyon Path

Slate Wall