Palette

Zen Blossom Garden

Soft, delicate pinks and muted purples evoke the tranquil and graceful bloom of a quiet garden.

pastelelegant5 colors

More pastel palettes

Preview

See it in context.

Interface

New

Ready when you are.

A quick look at how Zen Blossom Garden 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 Zen Blossom Garden.

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

Data visualization

#F2D2D6#E0B5BF#CD9CA8#A67D89#7A5B69

Palette guide

How to use Zen Blossom Garden

Overview

The Zen Blossom Garden palette unveils a collection of soft, delicate pinks and muted purples, evoking the tranquil and graceful bloom of a quiet garden. Ranging from the ethereal #F2D2D6 and the gentle #E0B5BF to the sophisticated #CD9CA8, and deepening into the elegant #A67D89 and the rich #7A5B69, this palette offers a luxurious yet serene aesthetic. Designers and developers will find these hues perfect for creating experiences that embody elegance, femininity, and calm. Its harmonious progression of tones is ideal for fashion, beauty, and lifestyle brands, as well as digital interfaces seeking a refined and soothing visual language.

Best used for

Luxury beauty product branding
Fashion and apparel collections
Wedding and event planning websites
Feminine lifestyle blogs
High-end stationery and invitations
Interior design for romantic spaces

Suggested color roles

primary

Utilize #7A5B69 (Deep Mauve) as a sophisticated primary color for impactful elements like logos, headers, or elegant brand accents, providing depth.

secondary

Employ #A67D89 (Dusty Rose) for supporting content, subheadings, or larger graphical elements, offering a refined complementary tone.

accent

Introduce #CD9CA8 (Muted Rose) for delicate highlights, subtle interactive elements, or to draw attention without overpowering the elegance.

background

Choose #F2D2D6 (Pale Pink) as a soft, airy background that enhances the palette's delicate nature and provides a gentle canvas for other colors.

text

For clear body text, #7A5B69 (Deep Mauve) or a dark charcoal offers excellent readability against lighter backgrounds like #F2D2D6. Black also provides strong contrast.

Accessibility notes

Ensure sufficient contrast when using #E0B5BF (Light Pink) text on #F2D2D6 (Pale Pink) backgrounds, especially for smaller fonts.
#7A5B69 (Deep Mauve) provides excellent readability for text against #F2D2D6 (Pale Pink) and #E0B5BF (Light Pink) backgrounds.
Avoid using #F2D2D6 (Pale Pink) text directly on white or very light grey backgrounds due to low visibility.
For interactive elements, use #7A5B69 or #A67D89 on #F2D2D6 to ensure clear visibility and user interaction.

Recommended combinations

Blossom Depth

A sophisticated trio for branding, combining deep mauve with a pale pink background and a dusty rose accent for elegance and balance.

#7A5B69 · #F2D2D6 · #A67D89

Gentle Cascade

Creates a soft, harmonious gradient of pinks and roses, ideal for elegant backgrounds, subtle illustrations, or visual transitions.

#E0B5BF · #CD9CA8 · #A67D89

Floral Whisper

Perfect for clean, minimalist designs, leveraging a strong dark element with a very light background and a gentle, muted rose highlight.

#7A5B69 · #F2D2D6 · #CD9CA8

CSS variables

:root {
  --zen-blossom-garden-1: #F2D2D6;
  --zen-blossom-garden-2: #E0B5BF;
  --zen-blossom-garden-3: #CD9CA8;
  --zen-blossom-garden-4: #A67D89;
  --zen-blossom-garden-5: #7A5B69;
}

Tailwind config

theme: {
  extend: {
    colors: {
      "zen-blossom-garden": {
        1: "#F2D2D6",
        2: "#E0B5BF",
        3: "#CD9CA8",
        4: "#A67D89",
        5: "#7A5B69",
      }
    }
  }
}

Hex values

Color 1#F2D2D6

Color 2#E0B5BF

Color 3#CD9CA8

Color 4#A67D89

Color 5#7A5B69

Accessibility

Contrast checker

1.3:1Fail

1.7:1Fail

2.5:1Fail

4.2:1AA18

1.3:1Fail

1.9:1Fail

3.3:1AA18

1.7:1Fail

1.3:1Fail

1.5:1Fail

2.5:1Fail

1.9:1Fail

1.5:1Fail

1.7:1Fail

4.2:1AA18

3.3:1AA18

2.5:1Fail

1.7:1Fail

Similar palettes

More like Zen Blossom Garden

Zen Blossom Garden

See it in context.

Ready when you are.

Built with Zen Blossom Garden.

How to use Zen Blossom Garden

Overview

Best used for

Suggested color roles

Accessibility notes

Recommended combinations

Blossom Depth

Gentle Cascade

Floral Whisper

CSS variables

Tailwind config

Related searches

Hex values

Contrast checker

More like Zen Blossom Garden