Back to palettes

Palette

Iron Gate Silhouette

Stark and strong grays, capturing the imposing elegance of an old gothic iron gate.

monochromedark5 colors
More monochrome palettes

Preview

See it in context.

Interface

New

Ready when you are.

A quick look at how Iron Gate Silhouette 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 Iron Gate Silhouette.

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

Data visualization

#1A1A1A#3A3A3A#5C5C5C#8B8B8B#B8B8B8

Palette guide

How to use Iron Gate Silhouette

Overview

This "Iron Gate Silhouette" palette delivers a sophisticated, monochrome experience, evoking strength and mystery with its range of deep to light grays. Ideal for projects demanding a serious or elegant aesthetic, it features primary dark tones like #1A1A1A and #3A3A3A, balanced by softer mid-grays such as #5C5C5C and #8B8B8B. The lightest shade, #B8B8B8, provides crucial contrast. Designers can leverage this palette for strong visual hierarchies and a timeless, minimalist appeal, perfect for impactful branding or user interfaces that require gravitas without relying on stark black and white. Its versatility shines in both modern and gothic-inspired designs.

Best used for

  • Luxury brand websites and packaging
  • Gothic or mystery-themed game UI
  • Corporate annual reports and presentations
  • Minimalist interior design concepts
  • High-end tech product interfaces
  • Architectural portfolio websites

Suggested color roles

primary

#1A1A1A (Deep charcoal, perfect for strong headers, primary navigation, or background for high-contrast elements.)

secondary

#3A3A3A (Slightly lighter, excellent for subheadings, card backgrounds, or secondary buttons.)

accent

#B8B8B8 (The lightest gray, use sparingly for subtle highlights, interactive states, or delicate outlines against darker tones.)

background

#3A3A3A or #1A1A1A (Provides a dark, sophisticated canvas. Consider #5C5C5C for a slightly softer, less intense dark mode.)

text

#B8B8B8 (For primary body text on dark backgrounds like #1A1A1A or #3A3A3A to ensure readability. Use a pure white for maximum contrast if needed.)

Accessibility notes

  • Ensure sufficient contrast when pairing #B8B8B8 text with lighter grays like #8B8B8B for WCAG AA compliance.
  • Avoid using #8B8B8B for small text on #5C5C5C backgrounds due to potential low contrast.
  • Use a strong contrast ratio for interactive elements, e.g., #B8B8B8 on #1A1A1A for buttons.
  • Consider alternative text colors like pure white or a very dark gray (e.g., #1A1A1A) for critical information on mid-tone backgrounds.

Recommended combinations

Dark Elegance

Ideal for high-contrast interfaces, large headlines, and sophisticated backgrounds with light text.

#1A1A1A · #5C5C5C · #B8B8B8

Subtle Depth

Creates a nuanced, layered effect for sections, cards, or secondary content areas.

#3A3A3A · #8B8B8B · #5C5C5C

Monochrome Highlight

Effective for call-to-action buttons or highlighted elements where #B8B8B8 provides a strong visual pop.

#1A1A1A · #B8B8B8 · #3A3A3A

CSS variables

:root {
  --iron-gate-silhouette-1: #1A1A1A;
  --iron-gate-silhouette-2: #3A3A3A;
  --iron-gate-silhouette-3: #5C5C5C;
  --iron-gate-silhouette-4: #8B8B8B;
  --iron-gate-silhouette-5: #B8B8B8;
}

Tailwind config

theme: {
  extend: {
    colors: {
      "iron-gate-silhouette": {
        1: "#1A1A1A",
        2: "#3A3A3A",
        3: "#5C5C5C",
        4: "#8B8B8B",
        5: "#B8B8B8",
      }
    }
  }
}

Related searches

dark gray color schememonochrome gothic paletteelegant dark ui colorsstrong gray brandingmysterious website palette

Palette colors

Hex values

Color 1#1A1A1A
·
Color 2#3A3A3A
·
Color 3#5C5C5C
·
Color 4#8B8B8B
·
Color 5#B8B8B8
·

Accessibility

Contrast checker

1
2
3
4
5
1
1.5:1Fail
2.6:1Fail
5.1:1AA
8.8:1AAA
2
1.5:1Fail
1.7:1Fail
3.3:1AA18
5.7:1AA
3
2.6:1Fail
1.7:1Fail
2:1Fail
3.4:1AA18
4
5.1:1AA
3.3:1AA18
2:1Fail
1.7:1Fail
5
8.8:1AAA
5.7:1AA
3.4:1AA18
1.7:1Fail

Similar palettes

More like Iron Gate Silhouette

View all monochrome
Gothic Cathedral Stone
Gothic Library Study
Gothic Stone Abbey
Midnight Ink Spill
Noir Alley Mood
Obsidian Monolith Shadow