Back to palettes

Palette

Sakura Blossom Path

A delicate and dreamy palette reflecting the ephemeral 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 Sakura Blossom Path 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 Path.

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

Data visualization

#FBCFDB#FADEE6#90EE90#EAEAEA#F2D8DE

Palette guide

How to use Sakura Blossom Path

Overview

The Sakura Blossom Path palette captures the serene beauty of cherry blossoms alongside fresh spring greenery. It combines delicate pinks like #FBCFDB, #FADEE6, and #F2D8DE with the vibrant contrast of #90EE90 and the neutral elegance of #EAEAEA. This unique blend is ideal for designers and developers seeking a fresh, gentle, and subtly romantic aesthetic. The inclusion of a light green adds a natural, grounding element to the otherwise soft pinks, making it highly versatile for projects that aim to evoke growth, renewal, and natural beauty.

Best used for

  • Eco-friendly product packaging and branding
  • Garden-themed websites or apps
  • Spring fashion collections and editorials
  • Children's book illustrations and designs
  • Nature-inspired art and photography
  • Clean, refreshing UI/UX designs

Suggested color roles

primary

Use #FBCFDB as a soft, inviting primary for large backgrounds, setting a gentle and romantic tone.

secondary

Employ #90EE90 for refreshing accents, calls-to-action, or interactive elements, providing a natural pop.

accent

Reserve #F2D8DE for subtle highlights or background textures, adding depth to the pink spectrum.

background

Utilize #EAEAEA or #FADEE6 for clean, neutral backgrounds that allow other colors to stand out.

text

For dark text, a rich charcoal or black works well on the lighter pinks and #EAEAEA. For lighter text, white can be used on #90EE90.

Accessibility notes

  • Ensure sufficient contrast for text when placing light pinks like #FBCFDB on #FADEE6.
  • Use #90EE90 with caution for small text; verify contrast against its background.
  • A dark neutral color like black or dark gray is recommended for body text against all lighter palette colors.
  • Test all interactive elements, especially those using #90EE90, to ensure they meet WCAG contrast guidelines.

Recommended combinations

Fresh Spring

Ideal for a vibrant, clean look; #90EE90 as an accent against #FBCFDB and #EAEAEA for balance.

#FBCFDB · #90EE90 · #EAEAEA

Soft Garden

Effective for nature-inspired themes, using #90EE90 to represent foliage against the soft pinks.

#FADEE6 · #90EE90 · #F2D8DE

Delicate Contrast

Great for UI elements where #90EE90 highlights interactive components on a soft, neutral base.

#FBCFDB · #EAEAEA · #90EE90

CSS variables

:root {
  --sakura-blossom-path-1: #FBCFDB;
  --sakura-blossom-path-2: #FADEE6;
  --sakura-blossom-path-3: #90EE90;
  --sakura-blossom-path-4: #EAEAEA;
  --sakura-blossom-path-5: #F2D8DE;
}

Tailwind config

theme: {
  extend: {
    colors: {
      "sakura-blossom-path": {
        1: "#FBCFDB",
        2: "#FADEE6",
        3: "#90EE90",
        4: "#EAEAEA",
        5: "#F2D8DE",
      }
    }
  }
}

Related searches

pink and green spring palettecherry blossom nature colorsfresh pastel color schemeromantic floral web designeco-friendly brand colors

Palette colors

Hex values

Color 1#FBCFDB
·
Color 2#FADEE6
·
Color 3#90EE90
·
Color 4#EAEAEA
·
Color 5#F2D8DE
·

Accessibility

Contrast checker

1
2
3
4
5
1
1.1:1Fail
1:1Fail
1.2:1Fail
1:1Fail
2
1.1:1Fail
1.1:1Fail
1:1Fail
1.1:1Fail
3
1:1Fail
1.1:1Fail
1.2:1Fail
1.1:1Fail
4
1.2:1Fail
1:1Fail
1.2:1Fail
1.1:1Fail
5
1:1Fail
1.1:1Fail
1.1:1Fail
1.1:1Fail

Similar palettes

More like Sakura Blossom Path

View all pastel