Palette

Soft Pastels

A dreamy collection of whisper-soft pinks, yellows, and blues, like cotton candy clouds.

PastelCalm5 colors

More Pastel palettes

Preview

See it in context.

Interface

New

Ready when you are.

A quick look at how Soft Pastels 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 Soft Pastels.

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

Data visualization

#FADADD#FFE5B4#C9EBFB#D4EDDA#F8F8FF

Palette guide

How to use Soft Pastels

Overview

The Soft Pastels palette is a dreamy collection of whisper-soft hues, perfect for designs that aim to evoke gentleness, innocence, and tranquility. Featuring delightful shades like the delicate pink #FADADD, the sunny #FFE5B4, and the serene #C9EBFB, this palette captures the essence of cotton candy clouds. Designers can utilize these hex codes for children's brands, romantic themes, or any project requiring a lighthearted and inviting atmosphere. Developers will find these colors excellent for creating soft UI elements, whimsical illustrations, or backgrounds that provide a comforting user experience. Its light and airy nature ensures a consistently calm and approachable aesthetic.

Best used for

Children's product branding
Baby shower invitations
Wedding and event planning websites
Beauty and skincare product packaging
Spring-themed digital campaigns
Creative art portfolio backgrounds

Suggested color roles

primary

Use #F8F8FF as a clean, expansive primary background, offering a near-white canvas for content.

secondary

Apply #D4EDDA for content blocks or secondary UI elements to introduce a refreshing, soft green touch.

accent

Utilize #FADADD or #C9EBFB for delicate highlights, interactive elements, or to add a playful pop of color.

background

Employ #F8F8FF or #FFE5B4 for main backgrounds to create an open, airy, and inviting feel.

text

None of the palette colors are suitable for body text; a dark grey or black is essential for accessibility and readability.

Accessibility notes

Due to the extreme lightness of all colors, ensure all text and critical UI elements use colors outside this palette for adequate contrast.
Avoid using any palette colors for text on other palette colors; contrast will be insufficient for readability.
These colors are best suited for large background areas, decorative elements, or very large display text.
When using these shades, always test against WCAG guidelines for visual elements, especially for interactive components.

Recommended combinations

Dreamy Sky

Ideal for creating serene, expansive backgrounds with subtle, calming shifts reminiscent of a clear sky.

#F8F8FF · #C9EBFB · #D4EDDA

Sweet Whimsy

Use for children's designs or playful elements, offering a warm and inviting feel with gentle contrast.

#FADADD · #FFE5B4 · #F8F8FF

Fresh Bloom

Excellent for spring-themed designs, evoking fresh growth and light, vibrant energy without being overpowering.

#D4EDDA · #C9EBFB · #FFE5B4

CSS variables

:root {
  --soft-pastels-1: #FADADD;
  --soft-pastels-2: #FFE5B4;
  --soft-pastels-3: #C9EBFB;
  --soft-pastels-4: #D4EDDA;
  --soft-pastels-5: #F8F8FF;
}

Tailwind config

theme: {
  extend: {
    colors: {
      "soft-pastels": {
        1: "#FADADD",
        2: "#FFE5B4",
        3: "#C9EBFB",
        4: "#D4EDDA",
        5: "#F8F8FF",
      }
    }
  }
}

Hex values

Color 1#FADADD

Color 2#FFE5B4

Color 3#C9EBFB

Color 4#D4EDDA

Color 5#F8F8FF

Accessibility

Contrast checker

1.1:1Fail

1:1Fail

1.2:1Fail

1.1:1Fail

1:1Fail

1.2:1Fail

1:1Fail

1.2:1Fail

1:1Fail

1.2:1Fail

Similar palettes

More like Soft Pastels

Soft Pastels

See it in context.

Ready when you are.

Built with Soft Pastels.

How to use Soft Pastels

Overview

Best used for

Suggested color roles

Accessibility notes

Recommended combinations

Dreamy Sky

Sweet Whimsy

Fresh Bloom

CSS variables

Tailwind config

Related searches

Hex values

Contrast checker

More like Soft Pastels