Back to palettes

Palette

Midnight Sakura Blooms

Delicate cherry blossoms stand out against a mysterious midnight canvas, elegant and captivating.

DarkDark5 colors
More Dark palettes

Preview

See it in context.

Interface

New

Ready when you are.

A quick look at how Midnight Sakura Blooms 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 Sakura Blooms.

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

Data visualization

#1A2333#3B4E63#889AA0#F5D6DE#FFA9B6

Palette guide

How to use Midnight Sakura Blooms

Overview

This palette, "Midnight Sakura Blooms," offers a sophisticated blend of deep, mysterious blues and soft, delicate pinks, reminiscent of cherry blossoms under a moonlit sky. Featuring a rich navy base (#1A2333), a muted grey-blue secondary (#3B4E63), and a subtle silver-grey (#889AA0), it creates a serene yet elegant foundation. The vibrant blush pink (#FFA9B6) and gentle light pink (#F5D6DE) introduce a captivating contrast, making it ideal for designs that aim for both sophistication and a touch of romantic delicacy. Designers and developers can leverage this palette to evoke themes of quiet beauty, luxury, and refined femininity.

Best used for

  • High-end fashion branding
  • Elegant wedding invitations or event websites
  • Luxury cosmetic packaging
  • Serene spa or beauty salon interiors
  • Romantic novel covers or digital art
  • Sophisticated personal blogs

Suggested color roles

primary

Use #1A2333 as the dominant dark background or for significant visual elements, providing a deep, grounding presence.

secondary

#3B4E63 works well for secondary panels, navigation, or larger text blocks, offering a softer contrast to the primary.

accent

#FFA9B6 should be reserved for call-to-action buttons, interactive elements, or small, impactful details that require a pop of color.

background

#F5D6DE provides a light, airy canvas for content, ensuring readability while maintaining the palette's delicate feel.

text

For dark backgrounds like #1A2333, use #F5D6DE or white. For light backgrounds like #F5D6DE, use #1A2333 or a dark charcoal for optimal readability.

Accessibility notes

  • Ensure sufficient contrast between #1A2333 text and #F5D6DE background.
  • Test #3B4E63 against #F5D6DE for body text readability, aiming for WCAG AA or AAA.
  • Use #FFA9B6 sparingly for text, primarily for accents, due to its lower contrast on lighter backgrounds.
  • Consider a slightly darker shade for interactive text elements if using #889AA0 as a background.

Recommended combinations

Night Blossom

Ideal for dark mode interfaces or elegant print designs where the light pink acts as background and the vibrant pink as an accent.

#1A2333 · #F5D6DE · #FFA9B6

Muted Elegance

Suitable for subtle branding, secondary UI elements, or sophisticated data visualization with a soft, refined feel.

#3B4E63 · #889AA0 · #F5D6DE

Deep Contrast

Effective for creating depth and visual hierarchy in web layouts, with the vibrant pink drawing attention to key features.

#1A2333 · #3B4E63 · #FFA9B6

CSS variables

:root {
  --midnight-sakura-blooms-1: #1A2333;
  --midnight-sakura-blooms-2: #3B4E63;
  --midnight-sakura-blooms-3: #889AA0;
  --midnight-sakura-blooms-4: #F5D6DE;
  --midnight-sakura-blooms-5: #FFA9B6;
}

Tailwind config

theme: {
  extend: {
    colors: {
      "midnight-sakura-blooms": {
        1: "#1A2333",
        2: "#3B4E63",
        3: "#889AA0",
        4: "#F5D6DE",
        5: "#FFA9B6",
      }
    }
  }
}

Related searches

dark floral color schemenavy and pink paletteelegant cherry blossom colorssophisticated feminine paletteromantic dark UI colors

Palette colors

Hex values

Color 1#1A2333
·
Color 2#3B4E63
·
Color 3#889AA0
·
Color 4#F5D6DE
·
Color 5#FFA9B6
·

Accessibility

Contrast checker

1
2
3
4
5
1
1.8:1Fail
5.4:1AA
11.7:1AAA
8.7:1AAA
2
1.8:1Fail
2.9:1Fail
6.3:1AA
4.7:1AA
3
5.4:1AA
2.9:1Fail
2.2:1Fail
1.6:1Fail
4
11.7:1AAA
6.3:1AA
2.2:1Fail
1.3:1Fail
5
8.7:1AAA
4.7:1AA
1.6:1Fail
1.3:1Fail

Similar palettes

More like Midnight Sakura Blooms

View all Dark