Back to palettes

Palette

Sakura Blossom Kiss

Delicate and tender, reminiscent of cherry blossoms gently touched by a spring morning.

pastelcalm5 colors
More pastel palettes

Preview

See it in context.

Interface

New

Ready when you are.

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

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

Data visualization

#FADBD8#F5B7B1#F1948A#D7BDE2#A569BD

Palette guide

How to use Sakura Blossom Kiss

Overview

The Sakura Blossom Kiss palette embodies the gentle touch of spring, blending delicate pinks with soft purples. It features the warm, ethereal #FADBD8, the inviting #F5B7B1, and the vibrant #F1948A, harmoniously complemented by the serene #D7BDE2 and the rich #A569BD. This collection of hues is perfect for designers and developers aiming to create a tender, romantic, and slightly whimsical atmosphere. The palette's balance between warmth and coolness provides ample opportunities for creating visually engaging and emotionally resonant designs across various platforms.

Best used for

  • Romantic novel covers and editorial design
  • Feminine beauty and lifestyle branding
  • Spring wedding invitations and decor
  • Gentle children's product packaging
  • Creative digital art and illustrations
  • Soft and inviting user interfaces

Suggested color roles

primary

Use #F1948A as an engaging primary color for calls-to-action or prominent graphical elements, offering a warm focal point.

secondary

Employ #D7BDE2 for supporting elements like navigation or subheadings, introducing a calming lavender touch.

accent

Reserve #A569BD for key accents or interactive states, providing a sophisticated and deeper contrast.

background

Utilize #FADBD8 or #F5B7B1 for light, airy backgrounds that enhance readability and maintain the palette's gentle mood.

text

For dark text on light backgrounds, #A569BD offers excellent contrast. A dark gray or black is suitable for general body copy.

Accessibility notes

  • Ensure sufficient contrast for text when using the lighter pinks or purples as background colors.
  • Avoid pairing #FADBD8 with #F5B7B1 for text and background due to low contrast levels.
  • Use #A569BD for critical text elements to ensure readability against lighter palette shades.
  • Validate color combinations for interactive elements to meet WCAG AA standards, especially for buttons and links.

Recommended combinations

Spring Bloom

Ideal for gradients or layered backgrounds, creating a soft, warm, and inviting visual flow.

#FADBD8 · #F5B7B1 · #F1948A

Lavender Kiss

Effective for main content areas, with #A569BD for headings and #D7BDE2 for supportive elements on a light base.

#FADBD8 · #D7BDE2 · #A569BD

Vibrant Harmony

Great for high-impact sections, where #A569BD provides strong contrast against #F1948A or #D7BDE2.

#F1948A · #D7BDE2 · #A569BD

CSS variables

:root {
  --sakura-blossom-kiss-1: #FADBD8;
  --sakura-blossom-kiss-2: #F5B7B1;
  --sakura-blossom-kiss-3: #F1948A;
  --sakura-blossom-kiss-4: #D7BDE2;
  --sakura-blossom-kiss-5: #A569BD;
}

Tailwind config

theme: {
  extend: {
    colors: {
      "sakura-blossom-kiss": {
        1: "#FADBD8",
        2: "#F5B7B1",
        3: "#F1948A",
        4: "#D7BDE2",
        5: "#A569BD",
      }
    }
  }
}

Related searches

pastel pink purple palettecherry blossom spring colorsromantic floral color schemesoft ui design with lavenderfeminine brand colors

Palette colors

Hex values

Color 1#FADBD8
·
Color 2#F5B7B1
·
Color 3#F1948A
·
Color 4#D7BDE2
·
Color 5#A569BD
·

Accessibility

Contrast checker

1
2
3
4
5
1
1.3:1Fail
1.7:1Fail
1.3:1Fail
3:1AA18
2
1.3:1Fail
1.3:1Fail
1:1Fail
2.3:1Fail
3
1.7:1Fail
1.3:1Fail
1.3:1Fail
1.7:1Fail
4
1.3:1Fail
1:1Fail
1.3:1Fail
2.3:1Fail
5
3:1AA18
2.3:1Fail
1.7:1Fail
2.3:1Fail

Similar palettes

More like Sakura Blossom Kiss

View all pastel