Back to palettes

Palette

Cloudspun Linen

Gentle shades of off-white and soft grey mimic the understated elegance of natural, cloudspun fabrics.

monochromeminimal5 colors
More monochrome palettes

Preview

See it in context.

Interface

New

Ready when you are.

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

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

Data visualization

#F2F2F2#E0E0E0#C9C9C9#B0B0B0#969696

Palette guide

How to use Cloudspun Linen

Overview

The Cloudspun Linen palette offers a sophisticated monochrome collection of gentle off-whites and soft grays, mimicking the understated elegance of natural, cloudspun fabrics. With shades ranging from the crisp #F2F2F2 to the grounding #969696, this palette is synonymous with minimalism, cleanliness, and subtle texture. Designers can leverage these hex codes to create refined, timeless aesthetics across various mediums, from digital interfaces to architectural renderings. Developers will find this palette excellent for building minimalist user experiences where readability and a sophisticated, unobtrusive visual presence are key, utilizing #E0E0E0 for backgrounds and #B0B0B0 for accents.

Best used for

  • minimalist branding
  • luxury product websites
  • art gallery displays
  • architectural portfolios
  • clean UI/UX designs
  • fashion and apparel e-commerce

Suggested color roles

primary

#B0B0B0 - A versatile mid-tone grey, suitable for main content areas, navigation, or subtle brand elements.

secondary

#C9C9C9 - A lighter, supportive grey, excellent for subheadings, borders, or secondary information.

accent

#969696 - The deepest grey, ideal for adding a touch of stronger contrast, important icons, or subtle call-to-action elements.

background

#F2F2F2 - The lightest shade, providing a clean, bright, and expansive canvas that mimics fresh linen.

text

#969696 - This darker grey provides sufficient contrast for body text against the lighter backgrounds like #F2F2F2 or #E0E0E0.

Accessibility notes

  • Text in #969696 on backgrounds like #F2F2F2 or #E0E0E0 should meet WCAG AA contrast standards.
  • Avoid using lighter shades like #C9C9C9 or #B0B0B0 for small text on very light backgrounds.
  • Ensure interactive elements have clear visual feedback beyond just color, given the subtle variations.
  • Always verify contrast ratios for all text and interactive elements, especially against adjacent colors.

Recommended combinations

Clean Canvas

For creating a spacious, minimalist background and layering effect in web or print designs.

#F2F2F2 · #E0E0E0 · #C9C9C9

Subtle Depth

To add definition and hierarchy to content blocks, using the darker greys for emphasis.

#B0B0B0 · #969696 · #E0E0E0

Monochrome Elegance

Ideal for sophisticated data visualization or subtle graphic elements where a harmonious grey scale is needed.

#C9C9C9 · #B0B0B0 · #F2F2F2

CSS variables

:root {
  --cloudspun-linen-1: #F2F2F2;
  --cloudspun-linen-2: #E0E0E0;
  --cloudspun-linen-3: #C9C9C9;
  --cloudspun-linen-4: #B0B0B0;
  --cloudspun-linen-5: #969696;
}

Tailwind config

theme: {
  extend: {
    colors: {
      "cloudspun-linen": {
        1: "#F2F2F2",
        2: "#E0E0E0",
        3: "#C9C9C9",
        4: "#B0B0B0",
        5: "#969696",
      }
    }
  }
}

Related searches

minimalist grey paletteclean monochrome colorslinen inspired designsubtle neutral UIelegant grey branding

Palette colors

Hex values

Color 1#F2F2F2
·
Color 2#E0E0E0
·
Color 3#C9C9C9
·
Color 4#B0B0B0
·
Color 5#969696
·

Accessibility

Contrast checker

1
2
3
4
5
1
1.2:1Fail
1.5:1Fail
1.9:1Fail
2.6:1Fail
2
1.2:1Fail
1.3:1Fail
1.6:1Fail
2.2:1Fail
3
1.5:1Fail
1.3:1Fail
1.3:1Fail
1.8:1Fail
4
1.9:1Fail
1.6:1Fail
1.3:1Fail
1.4:1Fail
5
2.6:1Fail
2.2:1Fail
1.8:1Fail
1.4:1Fail

Similar palettes

More like Cloudspun Linen

View all monochrome
Cloud Dancer Ballet
Cloud Petal Hues
Cool Linen Comfort
Lunar Surface Chill
Minimal Loft Living
Minimalist Loft Space