Back to palettes

Palette

Gothic Midnight Bloom

A somber palette capturing the quiet intensity of gothic architecture under a moonlit sky, with touches of muted stone.

darkdark5 colors
More dark palettes

Preview

See it in context.

Interface

New

Ready when you are.

A quick look at how Gothic Midnight Bloom 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 Midnight Bloom.

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

Data visualization

#0F0F0F#2F2F2F#5C4033#708090#D3D3D3

Palette guide

How to use Gothic Midnight Bloom

Overview

The Gothic Midnight Bloom palette evokes a sense of quiet intensity and mystery, perfect for projects requiring a sophisticated, somber aesthetic. Anchored by deep, near-black tones like #0F0F0F and a slightly lighter dark grey, #2F2F2F, it establishes a strong, dramatic foundation. The inclusion of a rich, earthy brown, #5C4033, adds warmth and organic depth, reminiscent of aged wood or damp earth. A cool, muted blue-grey, #708090, introduces a subtle, moonlit quality, while the soft light grey, #D3D3D3, provides essential contrast and highlights. This palette is ideal for creating designs that are elegant, contemplative, and possess a timeless, enigmatic charm. Designers can leverage its depth for immersive digital experiences or sophisticated print materials.

Best used for

  • Luxury brand identity and packaging
  • Dark mode UI designs for apps or websites
  • Gothic or fantasy-themed digital art and illustrations
  • Event invitations for elegant, formal gatherings
  • Photography portfolios showcasing dramatic or moody work
  • Book covers for mystery, thriller, or historical fiction genres

Suggested color roles

primary

Use #0F0F0F as the dominant background or a foundational color for large sections, providing a deep, immersive canvas.

secondary

Apply #2F2F2F for secondary backgrounds, content containers, or sidebars to add subtle visual separation without losing depth.

accent

Employ #5C4033 for call-to-action buttons, key visual elements, or small decorative details, offering a warm, earthy highlight.

background

Utilize #0F0F0F or #2F2F2F for main page backgrounds, creating a sophisticated and dark aesthetic.

text

Pair #D3D3D3 for primary body text on dark backgrounds, ensuring excellent readability. For headings or critical information, pure white can be used.

Accessibility notes

  • Ensure sufficient contrast when using #708090 or #5C4033 for text against darker backgrounds like #0F0F0F or #2F2F2F; larger font sizes may be necessary.
  • The contrast between #0F0F0F and #D3D3D3 is very strong, making it ideal for main body text.
  • Check all interactive elements for adequate contrast, especially buttons or links using the accent colors.
  • Avoid using #708090 or #5C4033 for small body text on dark backgrounds without careful contrast checking against WCAG standards.

Recommended combinations

Deep Foundation

Ideal for core branding, website main content areas with light text, and prominent call-to-action elements.

#0F0F0F · #D3D3D3 · #5C4033

Moonlit Stone

Excellent for UI components, secondary informational sections, or subtle background patterns to add depth and texture.

#2F2F2F · #708090 · #D3D3D3

Mystic Glimmer

Use for atmospheric imagery, subtle highlights on dark layouts, or decorative elements that require a sophisticated, muted pop.

#0F0F0F · #708090 · #5C4033

CSS variables

:root {
  --gothic-midnight-bloom-1: #0F0F0F;
  --gothic-midnight-bloom-2: #2F2F2F;
  --gothic-midnight-bloom-3: #5C4033;
  --gothic-midnight-bloom-4: #708090;
  --gothic-midnight-bloom-5: #D3D3D3;
}

Tailwind config

theme: {
  extend: {
    colors: {
      "gothic-midnight-bloom": {
        1: "#0F0F0F",
        2: "#2F2F2F",
        3: "#5C4033",
        4: "#708090",
        5: "#D3D3D3",
      }
    }
  }
}

Related searches

gothic color schemedark elegant palettemystery brand colorsmoody design palettestone and night colors

Palette colors

Hex values

Color 1#0F0F0F
·
Color 2#2F2F2F
·
Color 3#5C4033
·
Color 4#708090
·
Color 5#D3D3D3
·

Accessibility

Contrast checker

1
2
3
4
5
1
1.4:1Fail
2:1Fail
4.7:1AA
12.8:1AAA
2
1.4:1Fail
1.4:1Fail
3.3:1AA18
8.9:1AAA
3
2:1Fail
1.4:1Fail
2.3:1Fail
6.3:1AA
4
4.7:1AA
3.3:1AA18
2.3:1Fail
2.7:1Fail
5
12.8:1AAA
8.9:1AAA
6.3:1AA
2.7:1Fail

Similar palettes

More like Gothic Midnight Bloom

View all dark
Cathedral Shadow Grey
Enigmatic Shadow Tale
Gothic Arch Mystery
Gothic Castle Stone
Gothic Cathedral Glint
Gothic Cathedral Stone