Palette

Sakura Petal Dawn

Soft and delicate, like the ephemeral pinks of cherry blossom petals at first light.

pastelcalm5 colors

More pastel palettes

Preview

See it in context.

Interface

New

Ready when you are.

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

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

Data visualization

#F7CACA#E6A0A0#D37777#A84F4F#FFEAEA

Palette guide

How to use Sakura Petal Dawn

Overview

The Sakura Petal Dawn palette embodies the soft, delicate, and ephemeral pinks of cherry blossom petals at first light. This collection features a light Pastel Pink (#F7CACA), a muted Rosy Brown (#E6A0A0), a richer Indian Red (#D37777), and a deep Firebrick (#A84F4F), complemented by a very pale Pink Tint (#FFEAEA). Designers and developers can leverage these hues to create elegant, sophisticated, and warm digital experiences or print materials that evoke a sense of gentle romance and timeless beauty.

Best used for

Elegant branding for artisan products
Sophisticated beauty product lines
High-end confectionery packaging
Romantic event planning websites
Vintage-inspired digital art and illustrations
Premium lifestyle blogs and magazines

Suggested color roles

primary

Firebrick (#A84F4F) serves as the deepest, most impactful primary color for main titles, call-to-action buttons, or key graphical elements.

secondary

Indian Red (#D37777) works well for subheadings, important links, or secondary UI elements, providing a rich, muted presence.

accent

Rosy Brown (#E6A0A0) can be used for softer highlights, interactive states, or decorative flourishes, adding a touch of gentle warmth.

background

Pink Tint (#FFEAEA) provides a very pale, light, and refined base, setting an elegant and welcoming tone.

text

A dark brown or black text color is highly recommended for all body text to ensure optimal readability against the lighter backgrounds.

Accessibility notes

Firebrick (#A84F4F) offers the best contrast for text on Pink Tint (#FFEAEA) or Pastel Pink (#F7CACA), suitable for headings.
The lighter shades like Pastel Pink (#F7CACA) and Rosy Brown (#E6A0A0) have limited contrast for small, essential text.
Ensure sufficient contrast for all essential text, especially body copy, by pairing with a dark color.
Use the darker hues for interactive elements to improve visibility and ensure clear user feedback.

Recommended combinations

Dawn Blush

Create soft, layered pinks for backgrounds, subtle UI elements, or gentle visual transitions.

#FFEAEA · #F7CACA · #E6A0A0

Deep Bloom

Combine for impactful graphics, primary content blocks, or brand logos, providing depth and sophistication.

#A84F4F · #D37777 · #E6A0A0

Elegant Trio

Ideal for establishing visual hierarchy in content, with lighter shades for backgrounds and darker for prominent text.

#F7CACA · #D37777 · #A84F4F

CSS variables

:root {
  --sakura-petal-dawn-1: #F7CACA;
  --sakura-petal-dawn-2: #E6A0A0;
  --sakura-petal-dawn-3: #D37777;
  --sakura-petal-dawn-4: #A84F4F;
  --sakura-petal-dawn-5: #FFEAEA;
}

Tailwind config

theme: {
  extend: {
    colors: {
      "sakura-petal-dawn": {
        1: "#F7CACA",
        2: "#E6A0A0",
        3: "#D37777",
        4: "#A84F4F",
        5: "#FFEAEA",
      }
    }
  }
}

Hex values

Color 1#F7CACA

Color 2#E6A0A0

Color 3#D37777

Color 4#A84F4F

Color 5#FFEAEA

Accessibility

Contrast checker

1.4:1Fail

2.1:1Fail

3.7:1AA18

1.3:1Fail

1.4:1Fail

1.5:1Fail

2.5:1Fail

1.8:1Fail

2.1:1Fail

1.5:1Fail

1.7:1Fail

2.7:1Fail

3.7:1AA18

2.5:1Fail

1.7:1Fail

4.7:1AA

1.3:1Fail

1.8:1Fail

2.7:1Fail

4.7:1AA

Similar palettes

More like Sakura Petal Dawn

View all pastel

Cherry Blossom Breeze

Gentle Blossom Whisper