Back to palettes

Palette

Linen Weave

A gentle, understated collection of neutral tones, reminiscent of natural fibers and simple textures.

neutralminimal5 colors
More neutral palettes

Preview

See it in context.

Interface

New

Ready when you are.

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

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

Data visualization

#F5F5DC#DCDCDC#C0C0C0#A9A9A9#808080

Palette guide

How to use Linen Weave

Overview

The 'Linen Weave' palette offers a gentle, understated collection of natural neutral tones, reminiscent of natural fibers and simple textures. With its warm beige #F5F5DC, cool light grey #DCDCDC, balanced medium grey #C0C0C0, grounding mid-dark grey #A9A9A9, and a deep charcoal #808080, this palette is perfect for creating organic, calm, and sophisticated designs. Designers can leverage these shades to build interfaces that feel both natural and refined, while developers will find them invaluable for creating clean, harmonious web and mobile applications that prioritize readability and a gentle aesthetic.

Best used for

  • Artisan craft websites
  • Sustainable fashion brands
  • Home goods e-commerce platforms
  • Natural skincare product packaging
  • Editorial design for lifestyle magazines
  • Minimalist portfolio sites

Suggested color roles

primary

#F5F5DC - A soft, warm beige, excellent as a primary background, providing an inviting and natural canvas for content.

secondary

#DCDCDC - A clean, light grey, perfect for subtle section dividers, card backgrounds, or inactive UI elements to add gentle visual separation.

accent

#808080 - A solid, deep charcoal, highly effective for calls-to-action, important icons, or key graphical elements that need a clear, professional anchor.

background

#C0C0C0 - A versatile medium grey, suitable for secondary content areas or as a base for interactive elements, providing a soft contrast.

text

#A9A9A9 - A mid-tone grey, useful for secondary text, captions, or placeholder text. For primary body text, a darker grey or charcoal is recommended for optimal readability.

Accessibility notes

  • Ensure sufficient contrast when using #F5F5DC or #DCDCDC for backgrounds; text should be significantly darker (e.g., #808080 or black).
  • #A9A9A9 on #C0C0C0 may have insufficient contrast for small text; larger text or bolder weights might be needed.
  • Always use #808080 or darker for critical text elements to meet WCAG contrast guidelines.
  • Avoid using #DCDCDC as text on #F5F5DC as the contrast is too low for readability.

Recommended combinations

Natural Layers

Creates a soft, organic foundation for backgrounds and subtle layering.

#F5F5DC · #DCDCDC · #C0C0C0

Grounded Text

Excellent for establishing content hierarchy, main text, and important UI elements.

#C0C0C0 · #A9A9A9 · #808080

Warm & Cool

Provides strong, yet gentle, contrast for headings, calls-to-action, and primary content.

#F5F5DC · #808080 · #A9A9A9

CSS variables

:root {
  --linen-weave-1: #F5F5DC;
  --linen-weave-2: #DCDCDC;
  --linen-weave-3: #C0C0C0;
  --linen-weave-4: #A9A9A9;
  --linen-weave-5: #808080;
}

Tailwind config

theme: {
  extend: {
    colors: {
      "linen-weave": {
        1: "#F5F5DC",
        2: "#DCDCDC",
        3: "#C0C0C0",
        4: "#A9A9A9",
        5: "#808080",
      }
    }
  }
}

Related searches

neutral fabric color palettenatural grey beige colorsminimalist woven texture palettesoft earth tone uicalm natural web design

Palette colors

Hex values

Color 1#F5F5DC
·
Color 2#DCDCDC
·
Color 3#C0C0C0
·
Color 4#A9A9A9
·
Color 5#808080
·

Accessibility

Contrast checker

1
2
3
4
5
1
1.2:1Fail
1.6:1Fail
2.1:1Fail
3.6:1AA18
2
1.2:1Fail
1.3:1Fail
1.7:1Fail
2.9:1Fail
3
1.6:1Fail
1.3:1Fail
1.3:1Fail
2.2:1Fail
4
2.1:1Fail
1.7:1Fail
1.3:1Fail
1.7:1Fail
5
3.6:1AA18
2.9:1Fail
2.2:1Fail
1.7:1Fail

Similar palettes

More like Linen Weave

View all neutral
Ancient City Ruins
Ancient Rune Stone
Bleached Wood Grain
Calm Interior Lines
Cloud Soft Canvas
Cloudy Cobblestone Lane