Back to palettes

Palette

Sakura Blossom Haze

A soft, romantic palette reminiscent of cherry blossoms gently floating on a spring breeze.

pastelcalm5 colors
More pastel palettes

Preview

See it in context.

Interface

New

Ready when you are.

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

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

Data visualization

#FFCAD4#F2A4B3#C78283#B8B8B8#D8BFD8

Palette guide

How to use Sakura Blossom Haze

Overview

The Sakura Blossom Haze palette offers a soft, romantic blend inspired by cherry blossoms gently drifting in a spring breeze. It features a harmonious blend of pastel pinks, a warm grey, and a subtle lavender. Starting with the cheerful #FFCAD4 and transitioning to the gentle #F2A4B3, it introduces a unique contrast with the muted #C78283 and the neutral #B8B8B8, culminating in the serene #D8BFD8. This palette is excellent for designers seeking a delicate, modern, and slightly whimsical aesthetic, providing versatility for both digital and print applications, from branding to user interface design.

Best used for

  • Wedding stationery and event branding
  • Gentle e-commerce sites for artisan goods
  • Spring fashion editorials and blogs
  • Feminine app interfaces with a modern twist
  • Spa and wellness brand identity
  • Soft photography backdrops and themes

Suggested color roles

primary

Use #FFCAD4 as a soft, inviting primary for large background areas or main content blocks, radiating warmth.

secondary

Employ #F2A4B3 for secondary elements like navigation or informational panels, maintaining a gentle flow.

accent

Reserve #C78283 for subtle accents or interactive states, adding a touch of sophisticated muted rose.

background

Utilize #B8B8B8 or #D8BFD8 for a clean, modern background that provides a calm foundation.

text

For clear readability, use a dark charcoal or black on the lighter pinks and grays. For lighter text, white works well on #C78283.

Accessibility notes

  • Ensure sufficient contrast when using #B8B8B8 for text, especially against the lighter pinks.
  • Avoid using #FFCAD4 and #F2A4B3 in close proximity for text and background to prevent readability issues.
  • Consider using a darker neutral like black or charcoal for body text against all light colors in the palette.
  • Test color pairings for interactive elements to ensure they meet WCAG contrast requirements.

Recommended combinations

Soft Modern

Ideal for minimalist designs, using #B8B8B8 for primary text and #D8BFD8 for subtle accents on #FFCAD4.

#FFCAD4 · #B8B8B8 · #D8BFD8

Rose Whisper

Effective for romantic themes, with #C78283 as a key highlight against the softer #F2A4B3.

#F2A4B3 · #C78283 · #B8B8B8

Elegant Contrast

Great for headings and call-outs, where #C78283 provides a sophisticated pop against the light pink.

#FFCAD4 · #C78283 · #B8B8B8

CSS variables

:root {
  --sakura-blossom-haze-1: #FFCAD4;
  --sakura-blossom-haze-2: #F2A4B3;
  --sakura-blossom-haze-3: #C78283;
  --sakura-blossom-haze-4: #B8B8B8;
  --sakura-blossom-haze-5: #D8BFD8;
}

Tailwind config

theme: {
  extend: {
    colors: {
      "sakura-blossom-haze": {
        1: "#FFCAD4",
        2: "#F2A4B3",
        3: "#C78283",
        4: "#B8B8B8",
        5: "#D8BFD8",
      }
    }
  }
}

Related searches

pastel pink and grey paletteromantic spring color schemedelicate floral web colorsmodern feminine brandingsoft ui design palette

Palette colors

Hex values

Color 1#FFCAD4
·
Color 2#F2A4B3
·
Color 3#C78283
·
Color 4#B8B8B8
·
Color 5#D8BFD8
·

Accessibility

Contrast checker

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

Similar palettes

More like Sakura Blossom Haze

View all pastel