Palette

Sakura Bloom Grace

Soft pinks and rosy hues embody the fleeting, delicate 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 Grace 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 Grace.

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

Data visualization

#FFC0CB#FFB6C1#E9967A#DB7093#C71585

Palette guide

How to use Sakura Bloom Grace

Overview

The Sakura Bloom Grace palette embodies the delicate, fleeting beauty of cherry blossoms in spring, offering a sophisticated range of rosy hues. Featuring classic pinks like #FFC0CB and #FFB6C1, it transitions into warmer tones such as #E9967A, a soft coral-pink. The palette is anchored by the deeper, more impactful #DB7093, a rich rosy-pink, and the vibrant #C71585, a striking fuchsia. This collection is perfect for projects that aim for elegance, warmth, and a touch of romantic charm. Designers can utilize these colors to create inviting interfaces, luxurious branding, or expressive digital art that feels both gentle and captivating.

Best used for

Luxury beauty product packaging and branding
Romantic event decor and stationery
High-end fashion editorial layouts
Feminine lifestyle blog designs
Floral-themed digital artwork and illustrations
Elegant UI for wellness or self-care apps

Suggested color roles

primary

#FFC0CB - A classic, soft pink that serves as a gentle main color for backgrounds, large sections, or primary content areas, setting a serene tone.

secondary

#FFB6C1 - A slightly warmer pink, ideal for subheadings, active states, or supporting graphic elements, adding a subtle touch of vibrancy.

accent

#C71585 - A bold, striking fuchsia that provides high contrast and impact, perfect for calls-to-action, important notifications, or small, eye-catching details.

background

#FFC0CB - This light pink makes an excellent soft background, providing a warm, inviting canvas that allows darker text and elements to stand out gracefully.

text

For primary text, a deep charcoal or black offers the best readability. For secondary text or decorative elements, consider a rich plum-like shade or a dark version of #DB7093.

Accessibility notes

Ensure sufficient contrast when using #FFC0CB or #FFB6C1 for text on light backgrounds; generally, these are too light.
Pair #DB7093 or #C71585 with very light backgrounds for optimal text readability.
Avoid placing light text on #E9967A without checking WCAG contrast ratios.
Use #C71585 judiciously as an accent to avoid overwhelming users, especially for interactive elements.

Recommended combinations

Elegant Blossom

Creates a sophisticated and balanced look, suitable for branding, web headers, or elegant print designs.

#FFC0CB · #DB7093 · #FFB6C1

Vibrant Charm

Excellent for injecting energy and warmth, perfect for calls-to-action, illustrations, or playful UI elements.

#FFB6C1 · #C71585 · #E9967A

Subtle Depth

Ideal for softer gradients, background patterns, or designs requiring gentle transitions and a sense of calm depth.

#FFC0CB · #E9967A · #DB7093

CSS variables

:root {
  --sakura-bloom-grace-1: #FFC0CB;
  --sakura-bloom-grace-2: #FFB6C1;
  --sakura-bloom-grace-3: #E9967A;
  --sakura-bloom-grace-4: #DB7093;
  --sakura-bloom-grace-5: #C71585;
}

Tailwind config

theme: {
  extend: {
    colors: {
      "sakura-bloom-grace": {
        1: "#FFC0CB",
        2: "#FFB6C1",
        3: "#E9967A",
        4: "#DB7093",
        5: "#C71585",
      }
    }
  }
}

Hex values

Color 1#FFC0CB

Color 2#FFB6C1

Color 3#E9967A

Color 4#DB7093

Color 5#C71585

Accessibility

Contrast checker

1.1:1Fail

1.5:1Fail

2:1Fail

3.5:1AA18

1.1:1Fail

1.4:1Fail

1.9:1Fail

3.3:1AA18

1.5:1Fail

1.4:1Fail

1.3:1Fail

2.4:1Fail