Palette

Coral Cloud Blush

Soft, airy pinks and gentle corals, like clouds blushing at sunrise over a tranquil reef.

PastelCalm5 colors

More Pastel palettes

Preview

See it in context.

Interface

New

Ready when you are.

A quick look at how Coral Cloud Blush 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 Coral Cloud Blush.

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

Data visualization

#FFB6C1#FFC0CB#FFD1DC#FFE0EC#FFF0F5

Palette guide

How to use Coral Cloud Blush

Overview

The Coral Cloud Blush palette offers soft, airy pinks and gentle corals, like clouds blushing at sunrise over a tranquil reef. Featuring delicate #FFB6C1 (Light Pink) and #FFC0CB (Pink), this collection provides designers with a serene and dreamy range. The even softer #FFD1DC, #FFE0EC, and #FFF0F5 offer a gradual lightening, mimicking a gentle ethereal glow, ensuring versatility. Developers can leverage these hues to create user interfaces that feel calm, sophisticated, and inviting, perfect for beauty brands, baby products, or any project aiming for a gentle aesthetic. This palette is exceptionally versatile, blending subtle warmth with a soft, ethereal lightness, ideal for creating comforting and elegant digital experiences.

Best used for

baby product branding
bridal boutique website design
beauty and skincare packaging
minimalist fashion blog
wellness app interfaces
dreamy photography portfolio

Suggested color roles

primary

#FFB6C1 (Light Pink) provides a soft, delicate, and inviting base, ideal for main headers, prominent call-to-action buttons, or large background sections.

secondary

#FFC0CB (Pink) complements the primary, bringing a slightly brighter yet still ethereal tone. Use for subheadings or secondary buttons.

accent

#FFD1DC (Pale Pink) offers a subtle, luminous highlight. Perfect for delicate UI elements, icons, or to draw attention to key information with a gentle touch.

background

#FFF0F5 (Lavender Blush) offers a very light, airy background, providing maximum readability and a fresh, clean feel.

text

For text, a dark charcoal or black provides necessary contrast against these light shades. For accents, #FFB6C1 can work on a very dark background.

Accessibility notes

Ensure dark text (e.g., charcoal) has sufficient contrast against all palette colors for WCAG AA compliance.
Avoid pairing any two palette colors for text and background as their low contrast will hinder readability.
Reserve all palette colors for backgrounds, large headings, or decorative elements rather than small body text.
For interactive elements, maintain a minimum contrast ratio of 3:1 against adjacent colors, using darker shades for states.

Recommended combinations

Soft Blush

Excellent for creating soft, inviting backgrounds and content blocks, evoking a gentle, romantic feel.

#FFB6C1 · #FFC0CB · #FFD1DC

Cloud Whisper

Ideal for ethereal, almost white backgrounds or subtle decorative elements, creating a light and airy atmosphere.

#FFD1DC · #FFE0EC · #FFF0F5

Gentle Depth

Effective for subtle branding or soft calls-to-action, maintaining a delicate and refined visual hierarchy.

#FFB6C1 · #FFF0F5 · #FFC0CB

CSS variables

:root {
  --coral-cloud-blush-1: #FFB6C1;
  --coral-cloud-blush-2: #FFC0CB;
  --coral-cloud-blush-3: #FFD1DC;
  --coral-cloud-blush-4: #FFE0EC;
  --coral-cloud-blush-5: #FFF0F5;
}

Tailwind config

theme: {
  extend: {
    colors: {
      "coral-cloud-blush": {
        1: "#FFB6C1",
        2: "#FFC0CB",
        3: "#FFD1DC",
        4: "#FFE0EC",
        5: "#FFF0F5",
      }
    }
  }
}

Hex values

Color 1#FFB6C1

Color 2#FFC0CB

Color 3#FFD1DC

Color 4#FFE0EC

Color 5#FFF0F5

Accessibility

Contrast checker

1.1:1Fail

1.2:1Fail

1.3:1Fail

1.5:1Fail

1.1:1Fail

1.3:1Fail

1.4:1Fail

1.2:1Fail

1.1:1Fail

1.2:1Fail

1.3:1Fail

1.1:1Fail

1.5:1Fail

1.4:1Fail

1.2:1Fail

1.1:1Fail

Similar palettes

More like Coral Cloud Blush

Coral Cloud Blush

See it in context.

Ready when you are.

Built with Coral Cloud Blush.

How to use Coral Cloud Blush

Overview

Best used for

Suggested color roles

Accessibility notes

Recommended combinations

Soft Blush

Cloud Whisper

Gentle Depth

CSS variables

Tailwind config

Related searches

Hex values

Contrast checker

More like Coral Cloud Blush