Back to palettes

Palette

Gothic Arch Mystery

Deep, brooding tones with a hint of royal purple, evoking the solemn beauty of gothic architecture.

darkdark5 colors
More dark palettes

Preview

See it in context.

Interface

New

Ready when you are.

A quick look at how Gothic Arch Mystery 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 Arch Mystery.

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

Data visualization

#28282B#414144#660066#800080#330033

Palette guide

How to use Gothic Arch Mystery

Overview

The Gothic Arch Mystery palette combines deep, brooding grays with enigmatic royal purples, evoking the solemn beauty and intrigue of gothic architecture. It features the profound #28282B and #414144, balanced with the mysterious #330033, and highlighted by the striking #660066 and #800080. This collection is ideal for designs that require a sophisticated, dark, and slightly mystical aesthetic. It's perfect for conveying a sense of history, gravity, and understated elegance, making it versatile for both digital and print applications.

Best used for

  • Dark mode UI/UX design
  • Horror or mystery genre branding
  • Sophisticated luxury product packaging
  • Historical fiction book covers
  • Elegant event invitations with a dramatic flair
  • Art and photography emphasizing shadow and mood

Suggested color roles

primary

Use #28282B for foundational backgrounds or dominant structural elements, providing a deep, anchoring presence.

secondary

Employ #414144 for supporting sections, sidebars, or subtle textural details, maintaining a dark harmony.

accent

Apply #800080 for captivating highlights, interactive elements, or key messages, adding a touch of royal intrigue.

background

Utilize #28282B for a profound, dark canvas that enhances the mystery and sophistication of the palette.

text

For optimal readability, use white or a very light gray on all dark backgrounds. #800080 can be used for large, impactful headings on #28282B.

Accessibility notes

  • White or very light gray text is essential on these dark backgrounds to meet WCAG AA contrast standards.
  • Avoid using #414144 for text on #28282B, as the contrast will be insufficient.
  • Ensure interactive elements (buttons, links) have a clear visual state change, as color contrast alone might be subtle.
  • The royal purple accents should only be used for text if the size is large enough to ensure readability on dark backgrounds.

Recommended combinations

Dark Elegance

For backgrounds with subtle depth or sophisticated layered interfaces.

#28282B · #414144 · #660066

Royal Contrast

A powerful combination for branding, headlines, or striking call-to-action elements.

#28282B · #800080 · #414144

Mysterious Depth

Create gradients or visual elements that transition through the palette's enigmatic purples.

#330033 · #660066 · #800080

CSS variables

:root {
  --gothic-arch-mystery-1: #28282B;
  --gothic-arch-mystery-2: #414144;
  --gothic-arch-mystery-3: #660066;
  --gothic-arch-mystery-4: #800080;
  --gothic-arch-mystery-5: #330033;
}

Tailwind config

theme: {
  extend: {
    colors: {
      "gothic-arch-mystery": {
        1: "#28282B",
        2: "#414144",
        3: "#660066",
        4: "#800080",
        5: "#330033",
      }
    }
  }
}

Related searches

gothic dark palettemysterious purple graydeep architectural colorssolemn color schemedark mode purple

Palette colors

Hex values

Color 1#28282B
·
Color 2#414144
·
Color 3#660066
·
Color 4#800080
·
Color 5#330033
·

Accessibility

Contrast checker

1
2
3
4
5
1
1.4:1Fail
1.2:1Fail
1.6:1Fail
1.2:1Fail
2
1.4:1Fail
1.2:1Fail
1.1:1Fail
1.7:1Fail
3
1.2:1Fail
1.2:1Fail
1.3:1Fail
1.5:1Fail
4
1.6:1Fail
1.1:1Fail
1.3:1Fail
1.9:1Fail
5
1.2:1Fail
1.7:1Fail
1.5:1Fail
1.9:1Fail

Similar palettes

More like Gothic Arch Mystery

View all dark