Palette

Midnight Cherry Blossom

The ethereal beauty of cherry blossoms under a moonlit sky, blending mystery with delicate romance.

Darkelegant5 colors

More Dark palettes

Preview

See it in context.

Interface

New

Ready when you are.

A quick look at how Midnight Cherry Blossom 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 Cherry Blossom.

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

Data visualization

#303C6C#8E646A#2B2D2F#F7CAD0#545B6C

Palette guide

How to use Midnight Cherry Blossom

Overview

The "Midnight Cherry Blossom" palette captures the ethereal beauty of cherry blossoms under a moonlit sky, blending mystery with delicate romance. It features the deep, sophisticated navy of #303C6C and the grounding charcoal of #2B2D2F, beautifully contrasted with the soft, romantic blush of #F7CAD0. Warm, muted tones like #8E646A and #545B6C add depth and harmony. This palette is a designer's delight for projects requiring elegance, a touch of romance, or a unique dark aesthetic. Developers can leverage its balance of deep and delicate hues to create refined user interfaces, captivating editorial layouts, or branding that evokes serene beauty.

Best used for

Romantic and elegant wedding invitations
Luxury skincare or beauty product branding
Fashion blogs or e-commerce sites
Digital art and illustration with a soft, dark theme
Event branding for sophisticated gatherings
Editorial design with a delicate touch

Suggested color roles

primary

#303C6C – A deep, rich navy, perfect for foundational backgrounds, headers, or main content blocks, providing a sophisticated base.

secondary

#2B2D2F – A grounding charcoal, ideal for navigation, footers, or to add a strong, neutral anchor to the design.

accent

#F7CAD0 – Use this delicate blush pink for calls to action, important highlights, or subtle decorative elements, symbolizing the cherry blossom.

background

#303C6C or #2B2D2F for a deep, elegant canvas. #F7CAD0 can be used for light, airy sections or content cards.

text

#F7CAD0 or white for main body text on dark backgrounds like #303C6C or #2B2D2F. Use #2B2D2F for text on #F7CAD0.

Accessibility notes

Ensure high contrast between the dark background colors (#303C6C, #2B2D2F) and the light accent color (#F7CAD0) for text.
Be cautious when using #8E646A and #545B6C for small text on similar backgrounds, as contrast might be insufficient.
For interactive elements, ensure clear visual feedback beyond just color changes, especially for states using similar hues.
Verify readability of all text sizes and weights across the chosen color pairings.

Recommended combinations

Moonlit Bloom

A romantic dark mode, #303C6C as background, #F7CAD0 for text and delicate highlights, #8E646A for secondary elements.

#303C6C · #F7CAD0 · #8E646A

Elegant Contrast

Provides a strong, sophisticated contrast for headers or hero sections, with charcoal background, light pink focal point, and muted blue-grey support.

#2B2D2F · #F7CAD0 · #545B6C

Soft Night

Ideal for a light-themed design, #F7CAD0 as background, #303C6C for headings, and #2B2D2F for supporting text.

#F7CAD0 · #303C6C · #2B2D2F

CSS variables

:root {
  --midnight-cherry-blossom-2-1: #303C6C;
  --midnight-cherry-blossom-2-2: #8E646A;
  --midnight-cherry-blossom-2-3: #2B2D2F;
  --midnight-cherry-blossom-2-4: #F7CAD0;
  --midnight-cherry-blossom-2-5: #545B6C;
}

Tailwind config

theme: {
  extend: {
    colors: {
      "midnight-cherry-blossom-2": {
        1: "#303C6C",
        2: "#8E646A",
        3: "#2B2D2F",
        4: "#F7CAD0",
        5: "#545B6C",
      }
    }
  }
}

Hex values

Color 1#303C6C

Color 2#8E646A

Color 3#2B2D2F

Color 4#F7CAD0

Color 5#545B6C

Accessibility

Contrast checker

2.1:1Fail

1.3:1Fail

7.2:1AAA

1.6:1Fail

2.1:1Fail

2.8:1Fail

3.4:1AA18

1.4:1Fail

1.3:1Fail

2.8:1Fail

9.4:1AAA

2:1Fail

7.2:1AAA

3.4:1AA18

9.4:1AAA

4.6:1AA

1.6:1Fail

1.4:1Fail

2:1Fail

4.6:1AA

Similar palettes

More like Midnight Cherry Blossom

Gothic Revival Grandeur

Regal Theatre Curtains

Gilded Age Elegance