Palette

Midnight Sakura Dusk

A serene blend of deep purples and soft pinks, like cherry blossoms illuminated under a twilight sky.

pastelelegant5 colors

More pastel palettes

Preview

See it in context.

Interface

New

Ready when you are.

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

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

Data visualization

#2C0D3E#6E3A7E#A77DB3#E3BAD9#F7E1EF

Palette guide

How to use Midnight Sakura Dusk

Overview

The "Midnight Sakura Dusk" palette captures the serene beauty of twilight with a harmonious blend of deep purples and soft, ethereal pinks. It features a rich, mysterious aubergine (#2C0D3E) as its darkest tone, complemented by a mid-tone plum (#6E3A7E) and a delicate lavender (#A77DB3). The lighter shades, a soft rose-mauve (#E3BAD9) and a nearly white blush (#F7E1EF), evoke the gentle glow of cherry blossoms under a fading sky. This palette is perfect for designers seeking to convey elegance, softness, and a touch of romantic mystique in their projects.

Best used for

Brand identity for luxury beauty products
Elegant event invitations or decor
Soft, romantic web design themes
Interior design for boutique spaces
Digital art with a whimsical or dreamy feel
Fashion design for evening wear

Suggested color roles

primary

Use #2C0D3E for dominant backgrounds, headers, or strong graphical elements to establish a profound, luxurious feel.

secondary

#6E3A7E is excellent for subheadings, navigation bars, or data representation, providing depth without overwhelming.

accent

#A77DB3 works beautifully for interactive elements, highlights, or small decorative details, offering a subtle pop.

background

#F7E1EF provides a clean, soft canvas that allows content to breathe and maintains the palette's delicate aesthetic.

text

For dark backgrounds like #2C0D3E, use #F7E1EF or white. For light backgrounds like #F7E1EF, use #2C0D3E or a very dark purple for optimal readability.

Accessibility notes

Ensure sufficient contrast for text on backgrounds, especially between #6E3A7E and #F7E1EF for body text.
#A77DB3 might require careful pairing for text to meet WCAG contrast standards, particularly on lighter backgrounds.
Avoid using #E3BAD9 for small text on #F7E1EF, as contrast will be too low.
Prioritize using #2C0D3E or #6E3A7E for body text on light backgrounds to ensure readability.

Recommended combinations

Twilight Bloom

Creates a sophisticated dark theme, with light elements standing out elegantly, suitable for luxury brand websites.

#2C0D3E · #E3BAD9 · #A77DB3

Soft Gradient

Excellent for creating subtle gradients or layered effects in UI elements, evoking a soft, ethereal quality.

#6E3A7E · #A77DB3 · #F7E1EF

Deep Romance

Provides a strong visual hierarchy for landing pages, with the darkest tones grounding the design and the lightest offering softness.

#2C0D3E · #6E3A7E · #F7E1EF

CSS variables

:root {
  --midnight-sakura-dusk-1: #2C0D3E;
  --midnight-sakura-dusk-2: #6E3A7E;
  --midnight-sakura-dusk-3: #A77DB3;
  --midnight-sakura-dusk-4: #E3BAD9;
  --midnight-sakura-dusk-5: #F7E1EF;
}

Tailwind config

theme: {
  extend: {
    colors: {
      "midnight-sakura-dusk": {
        1: "#2C0D3E",
        2: "#6E3A7E",
        3: "#A77DB3",
        4: "#E3BAD9",
        5: "#F7E1EF",
      }
    }
  }
}

Hex values

Color 1#2C0D3E

Color 2#6E3A7E

Color 3#A77DB3

Color 4#E3BAD9

Color 5#F7E1EF

Accessibility

Contrast checker

2.1:1Fail

5:1AA

10:1AAA

13.8:1AAA

2.1:1Fail

2.4:1Fail

4.8:1AA

6.6:1AA

5:1AA

2.4:1Fail

2:1Fail

2.7:1Fail