Back to palettes

Palette

Linen Cloud Calm

Gentle, soft neutrals inspired by the quiet simplicity of natural linen and cloud forms.

neutralcalm5 colors
More neutral palettes

Preview

See it in context.

Interface

New

Ready when you are.

A quick look at how Linen Cloud Calm 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 Linen Cloud Calm.

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

Data visualization

#ECECEC#D8D8D8#BFBFBF#A6A6A6#8C8C8C

Palette guide

How to use Linen Cloud Calm

Overview

The 'Linen Cloud Calm' palette presents a harmonious range of gentle, soft neutrals, perfect for creating serene and minimalist designs. Featuring subtle light grey #ECECEC, a versatile mid-light grey #D8D8D8, a balanced medium grey #BFBFBF, a grounding dark grey #A6A6A6, and a deep charcoal #8C8C8C, this collection is inspired by natural linen and quiet cloud forms. Designers can leverage these shades to build sophisticated, understated interfaces, while developers will appreciate their consistency for clean, modern web and app development, ensuring a cohesive and calming user experience across various elements.

Best used for

  • Clean, professional corporate websites
  • Meditation or wellness app interfaces
  • Luxury product packaging (minimalist)
  • Architectural portfolio presentations
  • Understated fashion branding
  • Digital dashboards requiring clarity

Suggested color roles

primary

#ECECEC - An extremely light grey, excellent as a primary background color, providing a clean, airy canvas that feels spacious.

secondary

#D8D8D8 - A slightly darker light grey, ideal for subtle sectioning, borders, or inactive UI elements, offering gentle visual separation.

accent

#8C8C8C - A rich, deep grey, highly effective for calls-to-action, key icons, or significant interactive elements, providing a strong anchor without being stark black.

background

#BFBFBF - A balanced medium grey, versatile for card backgrounds, secondary content areas, or even as a base for white text in specific sections.

text

#A6A6A6 - A mid-dark grey, suitable for secondary text, captions, or subtle headings. For primary body text, consider a darker shade like black or a very dark charcoal for optimal readability.

Accessibility notes

  • Ensure robust contrast when using lighter greys like #ECECEC and #D8D8D8 for backgrounds; text should be significantly darker.
  • #A6A6A6 on #BFBFBF may have insufficient contrast for small text; check WCAG guidelines.
  • Use #8C8C8C for all essential text on light backgrounds to meet AA or AAA contrast levels.
  • Avoid pairing very similar light greys (e.g., #ECECEC text on #D8D8D8 background) for readability.

Recommended combinations

Light & Airy

Creates a spacious, clean feel for backgrounds, headers, and subtle dividers.

#ECECEC · #D8D8D8 · #BFBFBF

Subtle Depth

Ideal for content hierarchy, main text, and interactive elements against a lighter backdrop.

#D8D8D8 · #A6A6A6 · #8C8C8C

Anchored Clarity

Provides strong readability for primary text and calls-to-action on a soft, muted canvas.

#ECECEC · #BFBFBF · #8C8C8C

CSS variables

:root {
  --linen-cloud-calm-1: #ECECEC;
  --linen-cloud-calm-2: #D8D8D8;
  --linen-cloud-calm-3: #BFBFBF;
  --linen-cloud-calm-4: #A6A6A6;
  --linen-cloud-calm-5: #8C8C8C;
}

Tailwind config

theme: {
  extend: {
    colors: {
      "linen-cloud-calm": {
        1: "#ECECEC",
        2: "#D8D8D8",
        3: "#BFBFBF",
        4: "#A6A6A6",
        5: "#8C8C8C",
      }
    }
  }
}

Related searches

monochromatic grey palettecalm neutral ui colorssoft grey web designminimalist grey color schemelinen inspired palette

Palette colors

Hex values

Color 1#ECECEC
·
Color 2#D8D8D8
·
Color 3#BFBFBF
·
Color 4#A6A6A6
·
Color 5#8C8C8C
·

Accessibility

Contrast checker

1
2
3
4
5
1
1.2:1Fail
1.6:1Fail
2.1:1Fail
2.8:1Fail
2
1.2:1Fail
1.3:1Fail
1.7:1Fail
2.4:1Fail
3
1.6:1Fail
1.3:1Fail
1.3:1Fail
1.8:1Fail
4
2.1:1Fail
1.7:1Fail
1.3:1Fail
1.4:1Fail
5
2.8:1Fail
2.4:1Fail
1.8:1Fail
1.4:1Fail

Similar palettes

More like Linen Cloud Calm

View all neutral
Linen Weave Comfort
Whispering Linen Drape
Coastal Cliffs
Coastal Driftwood Grey
Coastal Fog Drift
Coastal Stone Pebble