Palette

Soft Cloud Pillow

Delicate whites and muted grays create a soft, ethereal feeling, like resting on a fluffy cloud.

PastelCalm5 colors

More Pastel palettes

Preview

See it in context.

Interface

New

Ready when you are.

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

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

Data visualization

#F5F5F5#EDE7E1#D7CCC8#BCAAA4#E0F2F7

Palette guide

How to use Soft Cloud Pillow

Overview

The Soft Cloud Pillow palette offers a delicate blend of whites, muted grays, and a hint of soft blue, creating an ethereal and comforting atmosphere. With primary hues like #F5F5F5 and #EDE7E1, complemented by the gentle warmth of #D7CCC8 and the serene touch of #E0F2F7, this collection evokes the feeling of resting on a fluffy cloud. This palette is incredibly versatile for designers seeking to convey softness, tranquility, and a clean aesthetic. It's ideal for projects that require a light, airy touch, from digital interfaces to physical product branding, ensuring a gentle and inviting user experience.

Best used for

Baby product branding
Spa and wellness websites
Minimalist blog designs
Wedding invitations and stationery
Serene mobile application interfaces
Gentle e-commerce platforms

Suggested color roles

primary

Use #F5F5F5 as the main canvas for its clean, airy, and expansive quality.

secondary

Apply #EDE7E1 for subtle background shifts or card elements, adding a touch of warmth.

accent

Employ #BCAAA4 as a muted, sophisticated accent for buttons or key information, offering gentle emphasis.

background

Both #F5F5F5 and #E0F2F7 provide excellent soft backdrops, with the latter adding a cool, serene undertone.

text

For clear readability on lighter shades, use #BCAAA4 or a dark charcoal/black for primary text.

Accessibility notes

Crucially ensure high contrast for text, especially when using lighter shades like #F5F5F5 and #EDE7E1.
Using #BCAAA4 for text on #F5F5F5 or #E0F2F7 will provide better readability than lighter palette colors.
Differentiate interactive elements clearly; avoid similar light tones for critical actions.
Consider using a subtle border or shadow for components on very light backgrounds to improve visibility.

Recommended combinations

Warm Neutral Base

Creates a cozy, inviting foundation, perfect for main content areas or product displays.

#F5F5F5 · #EDE7E1 · #D7CCC8

Gentle Contrast

Combines light and soft colors with a muted accent, ideal for headlines and subtle call-to-action buttons.

#F5F5F5 · #BCAAA4 · #E0F2F7

Airy Blend

Provides a fresh and open feel, excellent for backgrounds that need a hint of color without being overwhelming.

#E0F2F7 · #F5F5F5 · #EDE7E1

CSS variables

:root {
  --soft-cloud-pillow-1: #F5F5F5;
  --soft-cloud-pillow-2: #EDE7E1;
  --soft-cloud-pillow-3: #D7CCC8;
  --soft-cloud-pillow-4: #BCAAA4;
  --soft-cloud-pillow-5: #E0F2F7;
}

Tailwind config

theme: {
  extend: {
    colors: {
      "soft-cloud-pillow": {
        1: "#F5F5F5",
        2: "#EDE7E1",
        3: "#D7CCC8",
        4: "#BCAAA4",
        5: "#E0F2F7",
      }
    }
  }
}

Hex values

Color 1#F5F5F5

Color 2#EDE7E1

Color 3#D7CCC8

Color 4#BCAAA4

Color 5#E0F2F7

Accessibility

Contrast checker

1.1:1Fail

1.4:1Fail

2:1Fail

1.1:1Fail

1.3:1Fail

1.8:1Fail

1.1:1Fail

1.4:1Fail

1.3:1Fail

1.4:1Fail

2:1Fail

1.8:1Fail

1.4:1Fail

1.9:1Fail

1.1:1Fail

1.4:1Fail

1.9:1Fail

Similar palettes

More like Soft Cloud Pillow

Soft Cloud Pillow

See it in context.

Ready when you are.

Built with Soft Cloud Pillow.

How to use Soft Cloud Pillow

Overview

Best used for

Suggested color roles

Accessibility notes

Recommended combinations

Warm Neutral Base

Gentle Contrast

Airy Blend

CSS variables

Tailwind config

Related searches

Hex values

Contrast checker

More like Soft Cloud Pillow