Palette

Pastel Blossom Array

A delicate and harmonious mix of soft, muted tones, reminiscent of a garden bursting with pastel blossoms.

pastelplayful5 colors

More pastel palettes

Preview

See it in context.

Interface

New

Ready when you are.

A quick look at how Pastel Blossom Array 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 Pastel Blossom Array.

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

Data visualization

#F9CADC#C3E0DC#D7BDE2#F0DBB4#B4E4D7

Palette guide

How to use Pastel Blossom Array

Overview

The Pastel Blossom Array palette is a delicate and harmonious mix of soft, muted tones, reminiscent of a garden bursting with pastel blossoms. This inviting scheme features a soft rose pink #F9CADC, a calming mint green #C3E0DC, a gentle lavender #D7BDE2, a warm creamy yellow #F0DBB4, and a serene light teal #B4E4D7. Designers and developers can leverage these gentle colors to craft inviting user interfaces, charming brand identities, or sophisticated digital experiences. It's an excellent choice for projects aiming to convey softness, freshness, and a playful elegance, perfect for a spring-inspired aesthetic.

Best used for

Spring fashion collections and lookbooks
Wedding themes and floral arrangements
Baby clothing and nursery decor
Gardening blogs and botanical art
Gentle cosmetic or skincare branding
Playful e-commerce sites for unique crafts

Suggested color roles

primary

Use #F9CADC or #D7BDE2 for main content areas or primary brand elements to convey softness and elegance.

secondary

Apply #C3E0DC or #B4E4D7 as a supporting background or for secondary content blocks, offering a refreshing balance.

accent

Introduce #F0DBB4 as a subtle, warm highlight for interactive elements or decorative details, adding a touch of cheer.

background

Utilize #F0DBB4 as a light, airy canvas for your design, promoting a sense of calm and natural beauty.

text

Pair these light pastels with a dark gray (e.g., #4A4A4A) or charcoal for optimal readability and a sophisticated feel.

Accessibility notes

All palette colors are very light; ensure text has sufficient contrast, preferably using dark text.
Avoid using light text on any of these pastel backgrounds to prevent readability issues.
Test color combinations for WCAG AA compliance, especially for critical information.
Differentiate clearly between similar light hues like #C3E0DC and #B4E4D7 when used adjacently.

Recommended combinations

Spring Bloom

Ideal for creating soft gradients, elegant headers, or visual elements that evoke a fresh, floral feel.

#F9CADC · #C3E0DC · #D7BDE2

Garden Fresh

Perfect for backgrounds, secondary information panels, or calming illustrations that require a clean, refreshing look.

#B4E4D7 · #F0DBB4 · #C3E0DC

Delicate Pop

Combine for playful elements like icons, button states, or decorative patterns in feminine or celebratory themes.

#F9CADC · #D7BDE2 · #F0DBB4

CSS variables

:root {
  --pastel-blossom-array-1: #F9CADC;
  --pastel-blossom-array-2: #C3E0DC;
  --pastel-blossom-array-3: #D7BDE2;
  --pastel-blossom-array-4: #F0DBB4;
  --pastel-blossom-array-5: #B4E4D7;
}

Tailwind config

theme: {
  extend: {
    colors: {
      "pastel-blossom-array": {
        1: "#F9CADC",
        2: "#C3E0DC",
        3: "#D7BDE2",
        4: "#F0DBB4",
        5: "#B4E4D7",
      }
    }
  }
}

Hex values

Color 1#F9CADC

Color 2#C3E0DC

Color 3#D7BDE2

Color 4#F0DBB4

Color 5#B4E4D7

Accessibility

Contrast checker

1:1Fail

1.2:1Fail

1.1:1Fail

1:1Fail

1.2:1Fail

1:1Fail

1.2:1Fail

1.3:1Fail

1.2:1Fail

1.1:1Fail

1:1Fail

1.3:1Fail

1:1Fail

1.2:1Fail

1:1Fail

Similar palettes

More like Pastel Blossom Array

Pastel Blossom Array

See it in context.

Ready when you are.

Built with Pastel Blossom Array.

How to use Pastel Blossom Array

Overview

Best used for

Suggested color roles

Accessibility notes

Recommended combinations

Spring Bloom

Garden Fresh

Delicate Pop

CSS variables

Tailwind config

Related searches

Hex values

Contrast checker

More like Pastel Blossom Array