Palette

Pastel Sakura Blossom

Delicate, ephemeral pinks and a touch of tender green, capturing the gentle beauty of cherry blossoms in bloom.

pastelcalm5 colors

More pastel palettes

Preview

See it in context.

Interface

New

Ready when you are.

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

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

Data visualization

#FDEBF7#FAD6E1#FFB8C7#FF9CB1#B9E7DF

Palette guide

How to use Pastel Sakura Blossom

Overview

The "Pastel Sakura Blossom" palette captures the delicate, ephemeral beauty of cherry blossoms in bloom, featuring a range of tender pinks and a touch of refreshing green. This serene collection includes #FDEBF7, a nearly white blush, #FAD6E1, a soft, muted pink, and #FFB8C7, a warmer, classic blossom pink. #FF9CB1 offers a slightly deeper, more vibrant rose, beautifully complemented by #B9E7DF, a gentle mint green. This palette is ideal for designers seeking to evoke feelings of spring, romance, and natural elegance, perfect for branding, wedding themes, or feminine product design.

Best used for

Wedding invitations and event branding
Beauty and skincare product packaging
Feminine fashion or lifestyle blogs
Spring-themed digital illustrations
Floral design branding and websites
Nursery decor and baby product design

Suggested color roles

primary

#FFB8C7 - A classic blossom pink, perfect for main headings, calls-to-action, or elements that need to convey warmth and gentle allure.

secondary

#B9E7DF - This gentle mint green provides a refreshing contrast, ideal for subheadings, navigation, or as a secondary background element.

accent

#FF9CB1 - A slightly deeper pink, use this for highlights, interactive states, or small details to add a touch of vibrant romance.

background

#FDEBF7 - A very light, almost white pink, offering a clean, airy, and delicate canvas that enhances the other pastel tones.

text

#FAD6E1 - Best for very subtle, decorative text; for main body content, use a dark neutral like charcoal (#444444) to ensure readability.

Accessibility notes

All pinks are light; ensure dark text (e.g., black or #333333) is used for readability, especially with #FDEBF7 and #FAD6E1.
The green #B9E7DF will require dark text for sufficient contrast; avoid light text on this color.
Test contrast ratios rigorously for #FFB8C7 and #FF9CB1, especially if used for smaller text or interactive elements.
Avoid combining light pink text on light green backgrounds or vice-versa, as contrast will likely be too low.

Recommended combinations

Blossom Bloom

Creates a soft, romantic gradient from light to deeper pink, ideal for backgrounds or header hero sections.

#FDEBF7 · #FFB8C7 · #FF9CB1

Spring Fresh

Combine for a balanced spring look, with the green offering a refreshing counterpoint to the soft pinks.

#FAD6E1 · #B9E7DF · #FFB8C7

Elegant Contrast

Use the lightest pink as a base, the deeper pink for key elements, and the green for accents or calls to action.

#FDEBF7 · #FF9CB1 · #B9E7DF

CSS variables

:root {
  --pastel-sakura-blossom-1: #FDEBF7;
  --pastel-sakura-blossom-2: #FAD6E1;
  --pastel-sakura-blossom-3: #FFB8C7;
  --pastel-sakura-blossom-4: #FF9CB1;
  --pastel-sakura-blossom-5: #B9E7DF;
}

Tailwind config

theme: {
  extend: {
    colors: {
      "pastel-sakura-blossom": {
        1: "#FDEBF7",
        2: "#FAD6E1",
        3: "#FFB8C7",
        4: "#FF9CB1",
        5: "#B9E7DF",
      }
    }
  }
}

Hex values

Color 1#FDEBF7

Color 2#FAD6E1

Color 3#FFB8C7

Color 4#FF9CB1

Color 5#B9E7DF

Accessibility

Contrast checker

1.2:1Fail

1.4:1Fail

1.7:1Fail

1.2:1Fail

1.5:1Fail

1:1Fail

1.4:1Fail

1.2:1Fail

1.7:1Fail

1.5:1Fail

1.2:1Fail

1.5:1Fail

1.2:1Fail

1:1Fail

1.2:1Fail

1.5:1Fail

Similar palettes

More like Pastel Sakura Blossom

Pastel Sakura Blossom

See it in context.

Ready when you are.

Built with Pastel Sakura Blossom.

How to use Pastel Sakura Blossom

Overview

Best used for

Suggested color roles

Accessibility notes

Recommended combinations

Blossom Bloom

Spring Fresh

Elegant Contrast

CSS variables

Tailwind config

Related searches

Hex values

Contrast checker

More like Pastel Sakura Blossom