Back to palettes

Palette

Sakura Blossom Dawn

Delicate shades of pink blooming with the first light, inspired by cherry blossoms at dawn.

pastelcalm5 colors
More pastel palettes

Preview

See it in context.

Interface

New

Ready when you are.

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

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

Data visualization

#FDDCE0#F5C7D1#EA9EB4#E17697#A84F66

Palette guide

How to use Sakura Blossom Dawn

Overview

The Sakura Blossom Dawn palette evokes the serene beauty of cherry blossoms at first light, featuring a delicate gradient of pinks. From the ethereal pale pink of #FDDCE0 to the soft rose of #F5C7D1, transitioning through the more vibrant #EA9EB4 and #E17697, and culminating in the deep, muted plum of #A84F66. This palette is ideal for projects seeking a gentle, romantic, and sophisticated aesthetic. Designers can leverage its harmonious progression to create visual depth, while developers will appreciate the distinct yet complementary tones for UI elements, ensuring a cohesive and inviting user experience.

Best used for

  • Wedding invitations and floral branding
  • Beauty and skincare product packaging
  • Feminine fashion and lifestyle blogs
  • Spring-themed digital illustrations
  • Delicate UI/UX designs for apps
  • Romantic photography filters and presets

Suggested color roles

primary

Use #E17697 as a captivating primary for calls-to-action or key headings, offering a vibrant yet soft focal point.

secondary

Employ #EA9EB4 for supporting elements like subheadings or secondary buttons, providing a harmonious contrast.

accent

Reserve #A84F66 for subtle accents, such as icons, small details, or hover states, adding depth and sophistication.

background

Utilize #FDDCE0 or #F5C7D1 for clean, airy backgrounds that allow other colors to truly bloom.

text

For dark text, use #A84F66 on light backgrounds. For lighter text on darker elements, a near-white or light gray would work well.

Accessibility notes

  • Ensure sufficient contrast when pairing #A84F66 for text against lighter backgrounds like #FDDCE0.
  • Avoid using #FDDCE0 and #F5C7D1 for text against each other due to low contrast.
  • Use #E17697 or #EA9EB4 for larger text elements to improve readability against very pale backgrounds.
  • Test color combinations with accessibility checkers to meet WCAG guidelines, especially for interactive elements.

Recommended combinations

Soft Gradient

Ideal for subtle backgrounds, gradients, or layered graphic elements for a gentle transition.

#FDDCE0 · #F5C7D1 · #EA9EB4

Deep Contrast

Effective for main content areas, where #A84F66 provides strong text against #FDDCE0, accented by #E17697.

#FDDCE0 · #E17697 · #A84F66

Blossom Pop

Great for vibrant call-to-action buttons or prominent headlines, using #A84F66 for text on #E17697.

#F5C7D1 · #E17697 · #A84F66

CSS variables

:root {
  --sakura-blossom-dawn-4-1: #FDDCE0;
  --sakura-blossom-dawn-4-2: #F5C7D1;
  --sakura-blossom-dawn-4-3: #EA9EB4;
  --sakura-blossom-dawn-4-4: #E17697;
  --sakura-blossom-dawn-4-5: #A84F66;
}

Tailwind config

theme: {
  extend: {
    colors: {
      "sakura-blossom-dawn-4": {
        1: "#FDDCE0",
        2: "#F5C7D1",
        3: "#EA9EB4",
        4: "#E17697",
        5: "#A84F66",
      }
    }
  }
}

Related searches

delicate pink color schemecherry blossom web design colorssoft spring palette hex codesromantic pastel branding colorsfloral ui color guide

Palette colors

Hex values

Color 1#FDDCE0
·
Color 2#F5C7D1
·
Color 3#EA9EB4
·
Color 4#E17697
·
Color 5#A84F66
·

Accessibility

Contrast checker

1
2
3
4
5
1
1.2:1Fail
1.6:1Fail
2.3:1Fail
4.1:1AA18
2
1.2:1Fail
1.4:1Fail
1.9:1Fail
3.5:1AA18
3
1.6:1Fail
1.4:1Fail
1.4:1Fail
2.5:1Fail
4
2.3:1Fail
1.9:1Fail
1.4:1Fail
1.8:1Fail
5
4.1:1AA18
3.5:1AA18
2.5:1Fail
1.8:1Fail

Similar palettes

More like Sakura Blossom Dawn

View all pastel
Cherry Blossom Mist
Sakura Petal Whisper
Sakura Pink Dew
Cherry Bloom Serenity
Cherry Bloom Whisper
Cherry Blossom Bloom