Palette

Sakura Petal Glide

Delicate shades of pink capturing the fleeting beauty and gentle essence of cherry blossom petals.

pastelcalm5 colors

More pastel palettes

Preview

See it in context.

Interface

New

Ready when you are.

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

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

Data visualization

#FADADD#F2A9B9#CC7A8A#A64B5C#6B303A

Palette guide

How to use Sakura Petal Glide

Overview

The Sakura Petal Glide palette features delicate shades of pink, capturing the fleeting beauty and gentle essence of cherry blossom petals. This collection spans from a very light Pink Lace (#FADADD) to a soft Light Coral (#F2A9B9), a muted Medium Violet Red (#CC7A8A), a rich Crimson (#A64B5C), and culminates in a deep Maroon (#6B303A). Designers and developers can leverage this progression of hues to create elegant, mature, and sophisticated digital experiences or print materials that evoke a sense of refined beauty and quiet strength.

Best used for

Mature, elegant branding and identity
Wine or gourmet food packaging design
High-end fashion accessories and apparel
Art gallery websites and exhibition materials
Sophisticated editorial design and publishing
Autumn/winter collections with a soft, warm touch

Suggested color roles

primary

Maroon (#6B303A) serves as the deepest, most impactful primary color for main titles, strong call-to-action buttons, or key graphical elements, providing a solid anchor.

secondary

Crimson (#A64B5C) works well for subheadings, important links, or secondary UI elements, offering a rich, muted berry tone.

accent

Medium Violet Red (#CC7A8A) can be used for mid-tone highlights, interactive states, or decorative lines, adding a touch of gentle contrast.

background

Pink Lace (#FADADD) provides a very pale, soft, and refined base, setting an elegant and understated tone.

text

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

Accessibility notes

Maroon (#6B303A) provides excellent contrast for text on Pink Lace (#FADADD) or Light Coral (#F2A9B9).
Use Crimson (#A64B5C) for larger text elements against lighter backgrounds to improve readability.
Avoid using Pink Lace (#FADADD) or Light Coral (#F2A9B9) for small, essential text due to low contrast.
Ensure interactive elements are clearly visible, especially when utilizing the darker, richer hues for emphasis.

Recommended combinations

Deep Bloom

Create a rich, layered effect for bold statements, brand logos, or impactful content sections.

#6B303A · #A64B5C · #CC7A8A

Gentle Flow

Use for soft background gradients or subtle UI elements, evoking a smooth and delicate transition.

#FADADD · #F2A9B9 · #CC7A8A

Balanced Contrast

Ideal for establishing clear hierarchy in content blocks, with the lightest as background and darkest for prominence.

#FADADD · #A64B5C · #6B303A

CSS variables

:root {
  --sakura-petal-glide-1: #FADADD;
  --sakura-petal-glide-2: #F2A9B9;
  --sakura-petal-glide-3: #CC7A8A;
  --sakura-petal-glide-4: #A64B5C;
  --sakura-petal-glide-5: #6B303A;
}

Tailwind config

theme: {
  extend: {
    colors: {
      "sakura-petal-glide": {
        1: "#FADADD",
        2: "#F2A9B9",
        3: "#CC7A8A",
        4: "#A64B5C",
        5: "#6B303A",
      }
    }
  }
}

Hex values

Color 1#FADADD

Color 2#F2A9B9

Color 3#CC7A8A

Color 4#A64B5C

Color 5#6B303A

Accessibility

Contrast checker

1.4:1Fail

2.4:1Fail

4.3:1AA18

7.7:1AAA

1.4:1Fail

1.7:1Fail

2.9:1Fail

5.3:1AA

2.4:1Fail

1.7:1Fail

1.8:1Fail

3.2:1AA18

4.3:1AA18

2.9:1Fail

1.8:1Fail

7.7:1AAA

5.3:1AA

3.2:1AA18

1.8:1Fail

Similar palettes

More like Sakura Petal Glide

Sakura Petal Glide

See it in context.

Ready when you are.

Built with Sakura Petal Glide.

How to use Sakura Petal Glide

Overview

Best used for

Suggested color roles

Accessibility notes

Recommended combinations

Deep Bloom

Gentle Flow

Balanced Contrast

CSS variables

Tailwind config

Related searches

Hex values

Contrast checker

More like Sakura Petal Glide