Palette

Midnight Chapel Rose

A brooding yet elegant blend of deep purples and muted greys, like a shadowed chapel rose.

darkdark5 colors

More dark palettes

Preview

See it in context.

Interface

New

Ready when you are.

A quick look at how Midnight Chapel Rose 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 Midnight Chapel Rose.

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

Data visualization

#D5BCCC#9B8FA9#6A5C7A#4A3D5B#2A243A

Palette guide

How to use Midnight Chapel Rose

Overview

The "Midnight Chapel Rose" palette offers a brooding yet elegant blend of deep purples and muted greys, evoking the mysterious beauty of a shadowed chapel rose. It establishes its foundation with the profound darkness of #2A243A and the rich depth of #4A3D5B, transitioning through the sophisticated mid-tones of #6A5C7A and #9B8FA9, to the delicate luminosity of #D5BCCC. This palette is perfect for designers seeking to convey gothic elegance, mystery, or a touch of romantic melancholy. Developers will find it excellent for creating unique dark mode interfaces, high-end editorial designs, or branding that stands out with its refined, enigmatic charm.

Best used for

Gothic-themed websites or games
Luxury boutique branding
Dark romance literature covers
Elegant event design
Art and photography with a dramatic flair
Sophisticated UI for fashion apps

Suggested color roles

primary

#2A243A – The deepest, almost black-purple, ideal for foundational backgrounds, headers, or extensive dark mode elements, establishing a mysterious depth.

secondary

#4A3D5B – A rich, dark purple, perfect for navigation, secondary content blocks, or subtle branding elements.

accent

#9B8FA9 – Use this muted lilac-grey for subtle interactive elements, hover states, or to introduce a soft, ethereal highlight.

background

#2A243A or #4A3D5B for a deep, elegant canvas. #D5BCCC can be used for light, airy content sections or cards.

text

#D5BCCC or white for main body text on dark backgrounds like #2A243A or #4A3D5B. Use #2A243A for text on #D5BCCC.

Accessibility notes

Ensure high contrast between the darkest shades (#2A243A, #4A3D5B) and the lightest shade (#D5BCCC) for all textual content.
Be cautious when pairing #6A5C7A and #9B8FA9 for small text; their contrast might be too low for optimal readability.
For interactive elements, ensure distinct visual feedback using a contrasting shade like #D5BCCC or a clear focus indicator.
Test all color combinations across various screen types to ensure consistent readability.

Recommended combinations

Gothic Elegance

A sophisticated dark mode, #2A243A as background, #D5BCCC for main text, and #9B8FA9 for subtle accents or buttons.

#2A243A · #D5BCCC · #9B8FA9

Shadowed Bloom

Creates a layered, mysterious feel for hero sections or detailed graphics, with deep purple, mid-tone, and light highlight.

#4A3D5B · #6A5C7A · #D5BCCC

Rose Whisper

Ideal for a light-themed design, #D5BCCC as background, #2A243A for headings, and #4A3D5B for supporting text.

#D5BCCC · #2A243A · #4A3D5B

CSS variables

:root {
  --midnight-chapel-rose-1: #D5BCCC;
  --midnight-chapel-rose-2: #9B8FA9;
  --midnight-chapel-rose-3: #6A5C7A;
  --midnight-chapel-rose-4: #4A3D5B;
  --midnight-chapel-rose-5: #2A243A;
}

Tailwind config

theme: {
  extend: {
    colors: {
      "midnight-chapel-rose": {
        1: "#D5BCCC",
        2: "#9B8FA9",
        3: "#6A5C7A",
        4: "#4A3D5B",
        5: "#2A243A",
      }
    }
  }
}

Hex values

Color 1#D5BCCC

Color 2#9B8FA9

Color 3#6A5C7A

Color 4#4A3D5B

Color 5#2A243A

Accessibility

Contrast checker

1.7:1Fail

3.5:1AA18

5.6:1AA

8.4:1AAA

1.7:1Fail

2:1Fail

3.3:1AA18

4.9:1AA

3.5:1AA18

2:1Fail

1.6:1Fail

2.4:1Fail

5.6:1AA

3.3:1AA18

1.6:1Fail

1.5:1Fail

8.4:1AAA

4.9:1AA

2.4:1Fail

1.5:1Fail

Similar palettes

More like Midnight Chapel Rose