Back to palettes

Palette

Cloud Cotton Dream

Soft and ethereal grays and whites, evoking the fluffy comfort of clouds or cotton.

neutralminimal5 colors
More neutral palettes

Preview

See it in context.

Interface

New

Ready when you are.

A quick look at how Cloud Cotton Dream 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 Cloud Cotton Dream.

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

Data visualization

#F6F8F9#E1E5E7#CDD2D5#BBC0C4#A8AFB3

Palette guide

How to use Cloud Cotton Dream

Overview

The Cloud Cotton Dream palette offers soft and ethereal grays and whites, evoking the fluffy comfort of clouds or cotton. This neutral collection ranges from the near-white #F6F8F9 and very light #E1E5E7, through the subtle mid-tones of #CDD2D5 and #BBC0C4, to the gentle depth of #A8AFB3. It's perfectly suited for creating minimalist, serene, and dreamlike designs, making it ideal for brands that value purity, tranquility, and a delicate aesthetic. Designers can use these colors for airy backgrounds, subtle UI elements, and typography that conveys understated elegance and calm.

Best used for

  • Baby product branding and packaging
  • Minimalist web design and interfaces
  • Luxury spa and wellness marketing
  • Serene digital art and illustrations
  • Clean editorial and magazine layouts
  • Soft, inviting photography backdrops

Suggested color roles

primary

Use #F6F8F9 (near white) or #E1E5E7 (very light grey) as the main background for a soft, expansive canvas.

secondary

Apply #CDD2D5 (light grey) or #BBC0C4 (medium light grey) for subtle section breaks, navigation, or secondary information.

accent

Introduce #A8AFB3 (medium grey) for important text, icons, or subtle interactive elements, providing necessary definition.

background

A base of #F6F8F9 provides an ethereal, soft, and clean foundation, allowing content to breathe.

text

For optimal readability, use #A8AFB3 or a dark charcoal (e.g., #333333) text color on these light backgrounds.

Accessibility notes

  • Text contrast is crucial; always use #A8AFB3 or a very dark grey for all essential text.
  • Ensure interactive elements are clearly distinguishable from their background colors.
  • Avoid using light grey text on white or near-white backgrounds for any critical information.
  • Verify contrast ratios with accessibility tools for all text and UI elements to ensure legibility.

Recommended combinations

Ethereal Layers

Creates a delicate, layered background effect, perfect for a gentle and inviting user interface.

#F6F8F9 · #E1E5E7 · #CDD2D5

Soft Contrast

Provides a clean, minimalist look with the deepest grey offering a soft yet clear contrast.

#F6F8F9 · #A8AFB3 · #E1E5E7

Cloudy Depth

Ideal for building subtle depth in UI elements or infographics, mimicking soft, overlapping cloud formations.

#CDD2D5 · #BBC0C4 · #A8AFB3

CSS variables

:root {
  --cloud-cotton-dream-1: #F6F8F9;
  --cloud-cotton-dream-2: #E1E5E7;
  --cloud-cotton-dream-3: #CDD2D5;
  --cloud-cotton-dream-4: #BBC0C4;
  --cloud-cotton-dream-5: #A8AFB3;
}

Tailwind config

theme: {
  extend: {
    colors: {
      "cloud-cotton-dream": {
        1: "#F6F8F9",
        2: "#E1E5E7",
        3: "#CDD2D5",
        4: "#BBC0C4",
        5: "#A8AFB3",
      }
    }
  }
}

Related searches

ethereal grey palettesoft cotton colorsminimalist cloud schemegentle white greydreamlike neutral tones

Palette colors

Hex values

Color 1#F6F8F9
·
Color 2#E1E5E7
·
Color 3#CDD2D5
·
Color 4#BBC0C4
·
Color 5#A8AFB3
·

Accessibility

Contrast checker

1
2
3
4
5
1
1.2:1Fail
1.4:1Fail
1.7:1Fail
2.1:1Fail
2
1.2:1Fail
1.2:1Fail
1.4:1Fail
1.8:1Fail
3
1.4:1Fail
1.2:1Fail
1.2:1Fail
1.5:1Fail
4
1.7:1Fail
1.4:1Fail
1.2:1Fail
1.2:1Fail
5
2.1:1Fail
1.8:1Fail
1.5:1Fail
1.2:1Fail

Similar palettes

More like Cloud Cotton Dream

View all neutral
Cloud Veil Serene
Soft Alpaca Wool
Soft Linen Comfort
Arctic Fox Fur
Arctic Fox Whisper
Calm Interior Lines