Palette

Cherry Blossom

Delicate pinks and subtle lavenders capture the ethereal beauty of cherry blossoms in full bloom.

PastelCalm5 colors

More Pastel palettes

Preview

See it in context.

Interface

New

Ready when you are.

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

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

Data visualization

#FFB6C1#FFC0CB#F7CAC9#DDA0DD#FFF5EE

Palette guide

How to use Cherry Blossom

Overview

The Cherry Blossom palette evokes a sense of delicate elegance and springtime serenity. Dominated by soft pinks like #FFB6C1 and #FFC0CB, it's complemented by the subtle lavender-pink of #DDA0DD and a gentle, almost off-white base, #FFF5EE. This collection is perfect for designers aiming to create an ethereal, romantic, or soothing visual experience. The inclusion of #F7CAC9 provides a slightly warmer pink tone, adding depth without sacrificing the overall lightness. Use this palette to convey softness, tranquility, and natural beauty in digital and print designs, making it ideal for brands focused on wellness, beauty, or delicate craftsmanship.

Best used for

Wedding invitations and decor
Beauty and skincare branding
Feminine fashion and lifestyle blogs
Spring-themed events and marketing
Children's product design
Relaxation and wellness app interfaces

Suggested color roles

primary

Use #FFB6C1 (Light Pink) for main brand elements or large background sections to establish a soft, inviting tone.

secondary

Apply #DDA0DD (Plum) for subheadings, buttons, or illustrations, offering a delicate contrast.

accent

Employ #FFC0CB (Pink) for call-to-action buttons or small, decorative details that need a touch more vibrancy.

background

Utilize #FFF5EE (Seashell) as a clean, airy base, providing excellent readability for dark text.

text

For body text, consider a dark grey or charcoal to ensure readability against the light palette, or #1A1A1A for a crisp contrast.

Accessibility notes

Ensure sufficient contrast between #FFF5EE background and any text, especially smaller fonts.
Pair darker text (e.g., charcoal) with lighter colors like #FFB6C1 and #FFC0CB for optimal readability.
Avoid using #FFB6C1 and #FFC0CB together for text and background as their low contrast might cause issues.
Test contrast ratios for interactive elements like buttons using #DDA0DD against #FFF5EE.

Recommended combinations

Soft Gradient

Ideal for subtle backgrounds, header gradients, or soft transitions in web design.

#FFF5EE · #F7CAC9 · #FFB6C1

Delicate Contrast

Effective for main content areas where #FFF5EE is background, #FFB6C1 is headers, and #DDA0DD is accent.

#FFB6C1 · #DDA0DD · #FFF5EE

Floral Accent

Use these three for illustrations, icons, or decorative elements within a larger design.

#FFC0CB · #F7CAC9 · #DDA0DD

CSS variables

:root {
  --cherry-blossom-1: #FFB6C1;
  --cherry-blossom-2: #FFC0CB;
  --cherry-blossom-3: #F7CAC9;
  --cherry-blossom-4: #DDA0DD;
  --cherry-blossom-5: #FFF5EE;
}

Tailwind config

theme: {
  extend: {
    colors: {
      "cherry-blossom": {
        1: "#FFB6C1",
        2: "#FFC0CB",
        3: "#F7CAC9",
        4: "#DDA0DD",
        5: "#FFF5EE",
      }
    }
  }
}

Hex values

Color 1#FFB6C1

Color 2#FFC0CB

Color 3#F7CAC9

Color 4#DDA0DD

Color 5#FFF5EE

Accessibility

Contrast checker

1.1:1Fail

1.3:1Fail

1.5:1Fail

1.1:1Fail

1:1Fail

1.3:1Fail

1.4:1Fail

1.1:1Fail

1:1Fail

1.4:1Fail

1.3:1Fail

1.4:1Fail

1.9:1Fail

1.5:1Fail

1.4:1Fail

1.9:1Fail

Similar palettes

More like Cherry Blossom

Cherry Blossom

See it in context.

Ready when you are.

Built with Cherry Blossom.

How to use Cherry Blossom

Overview

Best used for

Suggested color roles

Accessibility notes

Recommended combinations

Soft Gradient

Delicate Contrast

Floral Accent

CSS variables

Tailwind config

Related searches

Hex values

Contrast checker

More like Cherry Blossom