Palette

Obsidian Midnight Bloom

A sophisticated blend of deep purples and grays, evoking the mysterious calm of a moonlit midnight garden.

darkdark5 colors

More dark palettes

Preview

See it in context.

Interface

New

Ready when you are.

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

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

Data visualization

#2C2C34#5D5C6C#8C8C9A#A6A6B8#403848

Palette guide

How to use Obsidian Midnight Bloom

Overview

The Obsidian Midnight Bloom palette is a sophisticated blend of deep purples and grays, evoking the mysterious calm of a moonlit midnight garden. It begins with the deep, purple-tinged #2C2C34, progressing through the moody #5D5C6C and the lighter #8C8C9A. A soft, luminous grey #A6A6B8 adds a delicate touch, while #403848 introduces a rich, earthy plum. This palette is excellent for designers seeking to create a refined, mysterious, and slightly whimsical atmosphere. Developers can utilize these nuanced shades to build elegant dark mode interfaces, editorial designs, or branding that conveys luxury and introspection. The subtle purple undertones add a unique character, moving beyond typical greys.

Best used for

Luxury lifestyle blogs
Cosmetics and beauty brands
Art and photography portfolios
Meditation or wellness apps
High-end event invitations
Editorial design for culture magazines

Suggested color roles

primary

#2C2C34 - The deep, elegant base for backgrounds, setting a sophisticated and moody tone.

secondary

#5D5C6C - Perfect for secondary panels, card backgrounds, or subtle UI elements, adding depth and warmth.

accent

#403848 - A rich, plum-charcoal that can serve as a unique accent for calls-to-action, important links, or brand elements.

background

#2C2C34 - Provides a deep, tranquil canvas, allowing lighter elements to emerge with grace and clarity.

text

#A6A6B8 - Excellent for body text on darker backgrounds, offering soft readability and a luminous quality. Use pure white for higher contrast.

Accessibility notes

Ensure #A6A6B8 text has sufficient contrast against #2C2C34, #5D5C6C, and #403848 for WCAG AA compliance.
Avoid using #8C8C9A directly on #5D5C6C for critical information due to potentially low contrast.
For primary headings or important information, consider a pure white text on the darkest shades.
Test all text-on-background color pairings to ensure readability, especially for smaller font sizes.

Recommended combinations

Midnight Layers

Creates a sophisticated, layered dark interface with soft, readable text, ideal for elegant content presentation.

#2C2C34 · #5D5C6C · #A6A6B8

Plum Accent

Effective for hero sections or key features, combining a deep base with a rich plum accent and supporting mid-grey.

#2C2C34 · #403848 · #8C8C9A

Luminous Contrast

Suited for content blocks where the lighter grey provides a soft background, with the deepest shade for emphasis.

#5D5C6C · #A6A6B8 · #2C2C34

CSS variables

:root {
  --obsidian-midnight-bloom-1: #2C2C34;
  --obsidian-midnight-bloom-2: #5D5C6C;
  --obsidian-midnight-bloom-3: #8C8C9A;
  --obsidian-midnight-bloom-4: #A6A6B8;
  --obsidian-midnight-bloom-5: #403848;
}

Tailwind config

theme: {
  extend: {
    colors: {
      "obsidian-midnight-bloom": {
        1: "#2C2C34",
        2: "#5D5C6C",
        3: "#8C8C9A",
        4: "#A6A6B8",
        5: "#403848",
      }
    }
  }
}

Hex values

Color 1#2C2C34

Color 2#5D5C6C

Color 3#8C8C9A

Color 4#A6A6B8

Color 5#403848

Accessibility

Contrast checker

2.1:1Fail

4.2:1AA18

5.8:1AA

1.2:1Fail

2.1:1Fail

2:1Fail

2.7:1Fail

1.7:1Fail

4.2:1AA18

2:1Fail

1.4:1Fail

3.4:1AA18

5.8:1AA

2.7:1Fail

1.4:1Fail

4.7:1AA

1.2:1Fail

1.7:1Fail

3.4:1AA18

4.7:1AA

Similar palettes

More like Obsidian Midnight Bloom