Back to palettes

Palette

Sakura Bloom

A soft and romantic palette inspired by the fleeting beauty of cherry blossoms in spring.

pastelcalm5 colors
More pastel palettes

Preview

See it in context.

Interface

New

Ready when you are.

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

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

Data visualization

#FDE8F1#F0C4CC#D9A0A8#C47F8B#B35E6D

Palette guide

How to use Sakura Bloom

Overview

The Sakura Bloom palette offers a soft and romantic collection of hues inspired by the fleeting beauty of cherry blossoms in spring. Ranging from the ethereal #FDE8F1 to the deeper, more grounded #B35E6D, this palette provides a sophisticated spectrum of pinks. Key colors include the delicate #F0C4CC and #D9A0A8, which offer lovely mid-tones, while #C47F8B provides a slightly muted, richer accent. This collection is exceptionally versatile for designs that aim for a gentle, elegant, or subtly feminine aesthetic. Developers and designers will find it useful for creating user interfaces, branding, or digital art that feels tranquil, inviting, and visually cohesive, perfect for evoking a serene spring mood.

Best used for

  • Romantic brand identities and logos
  • Feminine lifestyle and beauty websites
  • Wedding and special event stationery
  • Soft UI themes for wellness apps
  • Digital illustrations with a delicate touch
  • Photography portfolios (especially portraits)

Suggested color roles

primary

#FDE8F1 - An exceptionally light, almost white pink, ideal as a primary background or canvas, setting a serene and airy foundation for content.

secondary

#F0C4CC - A very gentle, light pink, excellent for subheadings, subtle dividers, or hover states, maintaining the palette's softness.

accent

#B35E6D - The deepest, most saturated pink in the palette, perfect for calls-to-action, important links, or small, impactful graphic details that need to stand out with elegance.

background

#FDE8F1 - This whisper-light pink provides an airy and clean base, ensuring excellent readability for darker text and contributing to a serene user experience.

text

For optimal readability, use a dark charcoal or black for primary text. For secondary text or decorative elements, a very dark version of #C47F8B or #B35E6D can offer a softer, yet legible, alternative.

Accessibility notes

  • The lightest shades like #FDE8F1 and #F0C4CC are generally too light for body text on light backgrounds; always use darker colors.
  • Ensure #D9A0A8, #C47F8B, and #B35E6D have sufficient contrast with background colors if used for interactive elements or important text.
  • Use a contrast checker tool to verify WCAG compliance for all text and interactive elements.
  • Provide clear visual feedback for interactive states, as subtle color changes might be missed within this soft palette.

Recommended combinations

Ethereal Bloom

Creates an incredibly soft and airy feel, perfect for minimalist backgrounds, subtle overlays, or delicate informational sections.

#FDE8F1 · #F0C4CC · #D9A0A8

Grounded Petal

Excellent for subtly highlighting key information, form fields, or secondary calls-to-action without harsh contrasts, adding more depth.

#F0C4CC · #C47F8B · #B35E6D

Sophisticated Spring

Suitable for creating elegant headers, footers, or subtle branding elements that require a touch of sophisticated depth against a light base.

#FDE8F1 · #B35E6D · #C47F8B

CSS variables

:root {
  --sakura-bloom-1: #FDE8F1;
  --sakura-bloom-2: #F0C4CC;
  --sakura-bloom-3: #D9A0A8;
  --sakura-bloom-4: #C47F8B;
  --sakura-bloom-5: #B35E6D;
}

Tailwind config

theme: {
  extend: {
    colors: {
      "sakura-bloom": {
        1: "#FDE8F1",
        2: "#F0C4CC",
        3: "#D9A0A8",
        4: "#C47F8B",
        5: "#B35E6D",
      }
    }
  }
}

Related searches

romantic pink color schemecherry blossom aestheticsoft spring branding palettedelicate floral web colorsmuted feminine UI design

Palette colors

Hex values

Color 1#FDE8F1
·
Color 2#F0C4CC
·
Color 3#D9A0A8
·
Color 4#C47F8B
·
Color 5#B35E6D
·

Accessibility

Contrast checker

1
2
3
4
5
1
1.3:1Fail
1.9:1Fail
2.7:1Fail
3.8:1AA18
2
1.3:1Fail
1.4:1Fail
2:1Fail
2.8:1Fail
3
1.9:1Fail
1.4:1Fail
1.4:1Fail
2:1Fail
4
2.7:1Fail
2:1Fail
1.4:1Fail
1.4:1Fail
5
3.8:1AA18
2.8:1Fail
2:1Fail
1.4:1Fail

Similar palettes

More like Sakura Bloom

View all pastel
Cherry Blossom Cloud
Sakura Petal Breeze
Cherry Bloom Serenity
Cherry Blossom Bloom
Cherry Blossom Breeze
Cherry Blossom Grace