Back to palettes

Palette

Warm Linen Weave

A comforting and understated palette inspired by the soft, natural texture and warmth of woven linen.

neutralminimal5 colors
More neutral palettes

Preview

See it in context.

Interface

New

Ready when you are.

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

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

Data visualization

#f5f5dc#fff8dc#dcdcdc#c3b091#afa085

Palette guide

How to use Warm Linen Weave

Overview

The Warm Linen Weave palette is a comforting and understated collection inspired by the soft, natural texture and warmth of woven linen. Featuring a range of gentle neutrals, from the near-white #fff8dc to the subtle beige of #f5f5dc, it creates a serene and inviting base. The inclusion of #dcdcdc (a light gray) adds a touch of cool balance, while the warmer #c3b091 and #afa085 provide earthy, grounding accents. This palette is ideal for minimalist designs seeking a sophisticated, natural, and calming aesthetic.

Best used for

  • Minimalist interior design websites
  • Sustainable fashion or textile brands
  • Wellness and spa branding
  • Clean, modern e-commerce platforms
  • Editorial design with a natural feel
  • Tech interfaces requiring a soft, neutral theme

Suggested color roles

primary

#afa085 for subtle branding, dark text on lighter backgrounds, or grounding elements in a minimalist design.

secondary

#c3b091 works well for supporting text, subheadings, or soft borders, maintaining a gentle warmth.

accent

#dcdcdc provides a cool, crisp accent, suitable for subtle separators, icons, or UI elements needing slight distinction.

background

#fff8dc or #f5f5dc serves as the main, airy canvas, offering a clean and expansive feel.

text

For primary text, #afa085 or a soft charcoal (e.g., #333333) ensures readability against the very light backgrounds.

Accessibility notes

  • Ensure #afa085 or #c3b091 has sufficient contrast with #fff8dc or #f5f5dc for body text (WCAG AA requirement).
  • Avoid using #dcdcdc for any text on #fff8dc or #f5f5dc as contrast will be extremely low and fail.
  • For interactive elements, use #afa085 or a darker neutral to ensure clear visibility and clickability.
  • Consider larger font sizes for text using #c3b091 on #f5f5dc to improve readability due to moderate contrast.

Recommended combinations

Soft Contrast

Gentle yet readable contrast for main content, with a warmer beige for secondary elements.

#AFA085 · #FFF8DC · #C3B091

Natural Layers

A subtle, layered approach for UI cards, background sections, or soft visual separation.

#C3B091 · #DCDCDC · #F5F5DC

Earthy Minimal

Creates sophisticated depth for minimalist branding or a serene, uncluttered user interface.

#AFA085 · #C3B091 · #FFF8DC

CSS variables

:root {
  --warm-linen-weave-1: #f5f5dc;
  --warm-linen-weave-2: #fff8dc;
  --warm-linen-weave-3: #dcdcdc;
  --warm-linen-weave-4: #c3b091;
  --warm-linen-weave-5: #afa085;
}

Tailwind config

theme: {
  extend: {
    colors: {
      "warm-linen-weave": {
        1: "#f5f5dc",
        2: "#fff8dc",
        3: "#dcdcdc",
        4: "#c3b091",
        5: "#afa085",
      }
    }
  }
}

Related searches

warm neutral color palettelinen inspired designminimalist earthy tonescozy beige gray schemenatural textile colors

Palette colors

Hex values

Color 1#f5f5dc
·
Color 2#fff8dc
·
Color 3#dcdcdc
·
Color 4#c3b091
·
Color 5#afa085
·

Accessibility

Contrast checker

1
2
3
4
5
1
1:1Fail
1.2:1Fail
1.9:1Fail
2.3:1Fail
2
1:1Fail
1.3:1Fail
2:1Fail
2.4:1Fail
3
1.2:1Fail
1.3:1Fail
1.5:1Fail
1.9:1Fail
4
1.9:1Fail
2:1Fail
1.5:1Fail
1.2:1Fail
5
2.3:1Fail
2.4:1Fail
1.9:1Fail
1.2:1Fail

Similar palettes

More like Warm Linen Weave

View all neutral
Greige Linen Comfort
Woven Linen Comfort
Ancient Papyrus Hue
Cloud Cotton Comfort
Seaside Linen
Soft Clay Vessel