Back to palettes

Palette

Moonlit Sakura

Delicate cherry blossom hues under the soft, serene glow of a spring moon, ethereal and tranquil.

pastelcalm5 colors
More pastel palettes

Preview

See it in context.

Interface

New

Ready when you are.

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

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

Data visualization

#F3E9F2#E0D7EA#CCC2E1#B9ADD7#A59BCD

Palette guide

How to use Moonlit Sakura

Overview

The Moonlit Sakura palette presents a tranquil and ethereal collection of delicate cherry blossom hues, bathed in the soft, serene glow of a spring moon. Featuring subtle variations of lavender and off-white, from the near-white #F3E9F2 to the deeper #A59BCD, this palette is perfect for designers aiming for elegance, calm, and understated sophistication. The harmonious progression of #E0D7EA, #CCC2E1, and #B9ADD7 offers a refined visual experience. It's an excellent choice for projects where a sense of peaceful beauty and minimalist charm is paramount, offering versatile options for both backgrounds and subtle accents.

Best used for

  • Elegant website designs and user interfaces
  • Minimalist branding and logo design
  • Luxury product packaging and marketing
  • Art gallery or museum digital platforms
  • Tranquil meditation or wellness applications
  • Soft fashion and accessory catalogs

Suggested color roles

primary

Utilize #B9ADD7 as a sophisticated primary color for main content areas or navigation, providing a calm and refined base.

secondary

Apply #CCC2E1 for supporting elements, subheadings, or subtle background textures, maintaining the palette's gentle aesthetic.

accent

Use the deepest shade, #A59BCD, for subtle accents, interactive elements, or important information that needs a touch more weight.

background

The lightest color, #F3E9F2, provides an excellent clean and airy background, while #E0D7EA can be used for slightly darker sections.

text

For optimal readability, a dark charcoal or black text color is recommended against these light backgrounds. #A59BCD can also work for headings on lighter shades.

Accessibility notes

  • Ensure sufficient contrast for all text, especially when using lighter shades like #F3E9F2 and #E0D7EA as backgrounds. Dark text is crucial.
  • Interactive elements should have clear visual indicators beyond color alone, given the subtle differences between hues.
  • Avoid placing light-colored text on #F3E9F2 or #E0D7EA, as this will result in poor readability.
  • Test color combinations for readability under various lighting conditions and screen types.

Recommended combinations

Soft Gradient

Ideal for creating subtle background gradients, delicate overlays, or section dividers that maintain an airy feel.

#F3E9F2 · #E0D7EA · #CCC2E1

Elegant Contrast

Perfect for headers, navigation, or call-to-action buttons where the darker purple provides a refined anchor against the light background.

#F3E9F2 · #B9ADD7 · #A59BCD

Tranquil Depth

Use for data visualization, informational panels, or layered UI elements that require depth without being overly bold.

#E0D7EA · #CCC2E1 · #A59BCD

CSS variables

:root {
  --moonlit-sakura-1: #F3E9F2;
  --moonlit-sakura-2: #E0D7EA;
  --moonlit-sakura-3: #CCC2E1;
  --moonlit-sakura-4: #B9ADD7;
  --moonlit-sakura-5: #A59BCD;
}

Tailwind config

theme: {
  extend: {
    colors: {
      "moonlit-sakura": {
        1: "#F3E9F2",
        2: "#E0D7EA",
        3: "#CCC2E1",
        4: "#B9ADD7",
        5: "#A59BCD",
      }
    }
  }
}

Related searches

soft purple paletteethereal sakura colorstranquil design schememinimalist lavenderelegant pastel purple

Palette colors

Hex values

Color 1#F3E9F2
·
Color 2#E0D7EA
·
Color 3#CCC2E1
·
Color 4#B9ADD7
·
Color 5#A59BCD
·

Accessibility

Contrast checker

1
2
3
4
5
1
1.2:1Fail
1.4:1Fail
1.8:1Fail
2.2:1Fail
2
1.2:1Fail
1.2:1Fail
1.5:1Fail
1.8:1Fail
3
1.4:1Fail
1.2:1Fail
1.2:1Fail
1.5:1Fail
4
1.8:1Fail
1.5:1Fail
1.2:1Fail
1.2:1Fail
5
2.2:1Fail
1.8:1Fail
1.5:1Fail
1.2:1Fail

Similar palettes

More like Moonlit Sakura

View all pastel
Sakura Garden Walk
Sakura Petal Cloud
Blushing Rose Dew
Cherry Bloom Serenity
Cherry Blossom Bloom
Cherry Blossom Blush