Back to palettes

Palette

Cool Linen Comfort

Simple and clean, like crisp, cool linen sheets on a serene summer morning.

monochromeminimal5 colors
More monochrome palettes

Preview

See it in context.

Interface

New

Ready when you are.

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

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

Data visualization

#F8F8F8#E8E8E8#D8D8D8#C8C8C8#B8B8B8

Palette guide

How to use Cool Linen Comfort

Overview

The Cool Linen Comfort palette provides a beautifully understated and serene monochromatic range of cool greys, ideal for designs that prioritize simplicity, clarity, and a calming aesthetic. From the almost white #F8F8F8 to the subtly darker #B8B8B8, with balanced mid-tones like #E8E8E8, #D8D8D8, and #C8C8C8, this collection offers a refined foundation for a clean and uncluttered user experience. Designers and developers can leverage these hex codes to create elegant, professional, and tranquil interfaces, branding, or architectural visualizations. Its gentle progression ensures visual harmony while allowing content to remain the focal point.

Best used for

  • Minimalist portfolio websites
  • High-end product display (e-commerce)
  • Architectural and interior design presentations
  • Professional corporate branding
  • Calm and focused productivity apps
  • Art gallery or photography exhibition sites

Suggested color roles

primary

Use #F8F8F8 as the expansive primary background, providing a clean, soft canvas.

secondary

Apply #E8E8E8 for secondary content areas, card backgrounds, or subtle section breaks.

accent

Introduce #C8C8C8 as a gentle accent for interactive elements, hover states, or subtle dividers.

background

The slightly darker #D8D8D8 can be used for footers or sidebars to add minimal depth.

text

A deep charcoal (#333333) or dark grey (#4A4A4A) provides excellent contrast on all these light tones.

Accessibility notes

  • Ensure sufficient contrast for all text elements, as the palette is very light.
  • Text in a dark color on #F8F8F8, #E8E8E8, and #D8D8D8 will be highly readable.
  • When using #B8B8B8 for text, ensure the background is significantly lighter for WCAG compliance.
  • Use subtle shadows or borders to clearly define interactive elements against similar light backgrounds.

Recommended combinations

Soft Base

Excellent for clean, spacious layouts, main content areas, or subtle background layers.

#F8F8F8 · #E8E8E8 · #D8D8D8

Layered Greys

Use for creating depth in UI cards, subtle progress indicators, or informational blocks.

#D8D8D8 · #C8C8C8 · #E8E8E8

Defined Edge

Ideal for borders, subtle dividers, or to define interactive elements against a light canvas.

#B8B8B8 · #F8F8F8 · #D8D8D8

CSS variables

:root {
  --cool-linen-comfort-1: #F8F8F8;
  --cool-linen-comfort-2: #E8E8E8;
  --cool-linen-comfort-3: #D8D8D8;
  --cool-linen-comfort-4: #C8C8C8;
  --cool-linen-comfort-5: #B8B8B8;
}

Tailwind config

theme: {
  extend: {
    colors: {
      "cool-linen-comfort": {
        1: "#F8F8F8",
        2: "#E8E8E8",
        3: "#D8D8D8",
        4: "#C8C8C8",
        5: "#B8B8B8",
      }
    }
  }
}

Related searches

monochromatic grey paletteminimalist calm colorscool linen design hex codessoft neutral UI paletteelegant light grey theme

Palette colors

Hex values

Color 1#F8F8F8
·
Color 2#E8E8E8
·
Color 3#D8D8D8
·
Color 4#C8C8C8
·
Color 5#B8B8B8
·

Accessibility

Contrast checker

1
2
3
4
5
1
1.2:1Fail
1.3:1Fail
1.6:1Fail
1.9:1Fail
2
1.2:1Fail
1.2:1Fail
1.4:1Fail
1.6:1Fail
3
1.3:1Fail
1.2:1Fail
1.2:1Fail
1.4:1Fail
4
1.6:1Fail
1.4:1Fail
1.2:1Fail
1.2:1Fail
5
1.9:1Fail
1.6:1Fail
1.4:1Fail
1.2:1Fail

Similar palettes

More like Cool Linen Comfort

View all monochrome
Cloudspun Linen
Greige Linen Whispers
Stone Garden Meditation
Urban Zen Garden
Zen Sand Garden
Calm Stone Meditate