Back to palettes

Palette

Gothic Iron Lace

Dark and intricate tones reflecting ancient ironwork and shadowed stone, evoking a sense of historical mystery.

darkdark5 colors
More dark palettes

Preview

See it in context.

Interface

New

Ready when you are.

A quick look at how Gothic Iron Lace 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 Iron Lace.

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

Data visualization

#1C1C1C#424242#696969#2F4F4F#36454F

Palette guide

How to use Gothic Iron Lace

Overview

The Gothic Iron Lace palette offers a robust and historically resonant collection of dark tones, ideal for designs seeking a strong, antique, or industrial gothic aesthetic. Anchored by deep grays like #1C1C1C and #424242, it evokes the strength of wrought iron and aged stone. Subtle cool undertones are introduced with the dark slate gray #2F4F4F and the charcoal gray #36454F, reminiscent of shadowed metalwork and medieval architecture. The inclusion of a lighter gray #696969 provides necessary contrast, making this palette versatile for creating a sophisticated, somber, and intricate visual experience without relying on bright colors.

Best used for

  • Industrial design interfaces
  • Historical documentary branding
  • Masculine product packaging
  • Architectural visualization
  • Dark academia websites
  • Heavy metal or rock band aesthetics

Suggested color roles

primary

#1C1C1C (A strong, almost-black base, perfect for backgrounds and foundational elements, reflecting iron.)

secondary

#424242 (A deep charcoal for secondary sections, offering a softer yet still dark contrast.)

accent

#2F4F4F (A muted blue-gray for subtle highlights, interactive elements, or intricate detailing, like aged patina.)

background

#1C1C1C (Provides a solid, dark canvas for a powerful and immersive user experience.)

text

#696969 (Suitable for subheadings or secondary text on very dark backgrounds; for body text, use a lighter shade like white or very light gray.)

Accessibility notes

  • Text in #696969 on #1C1C1C or #424242 will require careful evaluation for sufficient contrast.
  • Ensure primary body text uses a highly contrasting color, such as white or a very light gray, against the darkest backgrounds.
  • Use #2F4F4F and #36454F sparingly for text, primarily for decorative elements or larger headings, due to lower contrast potential.
  • Test all interactive elements for clear visual states (hover, active) using palette colors with good contrast.

Recommended combinations

Iron Base

A classic dark monochrome setup for core UI elements and content hierarchy.

#1C1C1C · #424242 · #696969

Lace Detail

Creates a subtle, cool-toned layering effect, ideal for intricate patterns or textured backgrounds.

#1C1C1C · #2F4F4F · #36454F

Shadowed Steel

For depth and material illusion, good for card backgrounds or section dividers.

#424242 · #36454F · #696969

CSS variables

:root {
  --gothic-iron-lace-1: #1C1C1C;
  --gothic-iron-lace-2: #424242;
  --gothic-iron-lace-3: #696969;
  --gothic-iron-lace-4: #2F4F4F;
  --gothic-iron-lace-5: #36454F;
}

Tailwind config

theme: {
  extend: {
    colors: {
      "gothic-iron-lace": {
        1: "#1C1C1C",
        2: "#424242",
        3: "#696969",
        4: "#2F4F4F",
        5: "#36454F",
      }
    }
  }
}

Related searches

dark gray color palettegothic metal aestheticindustrial dark thememedieval stone colorswrought iron colors

Palette colors

Hex values

Color 1#1C1C1C
·
Color 2#424242
·
Color 3#696969
·
Color 4#2F4F4F
·
Color 5#36454F
·

Accessibility

Contrast checker

1
2
3
4
5
1
1.7:1Fail
3.1:1AA18
1.9:1Fail
1.7:1Fail
2
1.7:1Fail
1.8:1Fail
1.1:1Fail
1:1Fail
3
3.1:1AA18
1.8:1Fail
1.6:1Fail
1.8:1Fail
4
1.9:1Fail
1.1:1Fail
1.6:1Fail
1.1:1Fail
5
1.7:1Fail
1:1Fail
1.8:1Fail
1.1:1Fail

Similar palettes

More like Gothic Iron Lace

View all dark