Back to palettes

Palette

Cloud Cotton Comfort

Gentle, muted tones inspired by soft clouds and the comforting feeling of fresh cotton.

neutralminimal5 colors
More neutral palettes

Preview

See it in context.

Interface

New

Ready when you are.

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

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

Data visualization

#F7FAF9#E0E2E4#C1C6C8#A4A7A9#878A8C

Palette guide

How to use Cloud Cotton Comfort

Overview

The Cloud Cotton Comfort palette features gentle, muted tones inspired by soft clouds and the comforting feeling of fresh cotton. This neutral collection ranges from the near-white #F7FAF9 and very light #E0E2E4, through the mid-tones of #C1C6C8 and #A4A7A9, to the grounding #878A8C. It's ideal for creating minimalist, cozy, and reassuring designs, perfect for brands that prioritize comfort, simplicity, and a soothing aesthetic. Designers will find these colors versatile for backgrounds, subtle UI elements, and typography that conveys understated elegance.

Best used for

  • Home goods and textiles branding
  • Baby products and nursery decor
  • Minimalist fashion websites
  • Spa and wellness marketing
  • Cozy lifestyle blogs and content
  • Clean, modern interior design

Suggested color roles

primary

Use #F7FAF9 (near white) or #E0E2E4 (very light grey) as the main background for a spacious and comforting canvas.

secondary

Apply #C1C6C8 (light-mid grey) or #A4A7A9 (medium grey) for subtle section breaks, navigation, or secondary information.

accent

Introduce #878A8C (darker grey) for key headings, icons, or grounding elements, providing necessary definition.

background

A base of #F7FAF9 provides a clean, comforting, and expansive foundation for any design.

text

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

Accessibility notes

  • Text contrast is paramount; always use #878A8C 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

Soft & Grounded

Creates a balance of softness with a grounding anchor, ideal for clean content blocks and subtle borders.

#F7FAF9 · #C1C6C8 · #878A8C

Layered Comfort

Perfect for building depth in UI layers or infographics, mimicking soft, overlapping textures.

#E0E2E4 · #A4A7A9 · #C1C6C8

Crisp Minimalism

Offers a very clean, minimalist look with the darkest grey providing a strong, clear contrast.

#F7FAF9 · #878A8C · #E0E2E4

CSS variables

:root {
  --cloud-cotton-comfort-1: #F7FAF9;
  --cloud-cotton-comfort-2: #E0E2E4;
  --cloud-cotton-comfort-3: #C1C6C8;
  --cloud-cotton-comfort-4: #A4A7A9;
  --cloud-cotton-comfort-5: #878A8C;
}

Tailwind config

theme: {
  extend: {
    colors: {
      "cloud-cotton-comfort": {
        1: "#F7FAF9",
        2: "#E0E2E4",
        3: "#C1C6C8",
        4: "#A4A7A9",
        5: "#878A8C",
      }
    }
  }
}

Related searches

soft grey palettecotton comfort colorsminimalist neutral tonescozy home decorgentle grey scheme

Palette colors

Hex values

Color 1#F7FAF9
·
Color 2#E0E2E4
·
Color 3#C1C6C8
·
Color 4#A4A7A9
·
Color 5#878A8C
·

Accessibility

Contrast checker

1
2
3
4
5
1
1.2:1Fail
1.6:1Fail
2.3:1Fail
3.3:1AA18
2
1.2:1Fail
1.3:1Fail
1.9:1Fail
2.7:1Fail
3
1.6:1Fail
1.3:1Fail
1.4:1Fail
2:1Fail
4
2.3:1Fail
1.9:1Fail
1.4:1Fail
1.4:1Fail
5
3.3:1AA18
2.7:1Fail
2:1Fail
1.4:1Fail

Similar palettes

More like Cloud Cotton Comfort

View all neutral
Fjord Cliff Hearth
Arctic Fox Fur
Art Studio Canvas
Canvas Loft Echo
Cloud Soft Canvas
Cloud Veil Serene