Back to palettes

Palette

Woven Tweed Comfort

A warm and grounding palette inspired by the rich, intertwining fibers and cozy feel of tweed fabric.

neutralcalm5 colors
More neutral palettes

Preview

See it in context.

Interface

New

Ready when you are.

A quick look at how Woven Tweed 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 Woven Tweed Comfort.

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

Data visualization

#5D4A3E#8C7B6D#AE9C8C#D0C3B7#E8E0D7

Palette guide

How to use Woven Tweed Comfort

Overview

The "Woven Tweed Comfort" palette is a warm and grounding collection, inspired by the rich, intertwining fibers and cozy feel of tweed fabric. It ranges from the deep, foundational #5D4A3E to the soft, light #E8E0D7. Mid-tones like #8C7B6D and #AE9C8C provide nuanced options for layering and depth, while #D0C3B7 offers a gentle, inviting beige. This palette is perfect for designers seeking to evoke a sense of coziness, traditional craftsmanship, and understated elegance, ideal for projects aiming for a sophisticated yet approachable and comfortable aesthetic.

Best used for

  • Heritage brand identities
  • Cozy cafe or lounge interiors
  • Winter fashion editorials
  • Rustic home decor websites
  • Traditional menswear branding
  • Book cover designs for classics

Suggested color roles

primary

#8C7B6D - A warm, versatile mid-brown, excellent for dominant sections, large UI elements, or primary content blocks, establishing a cozy feel.

secondary

#AE9C8C - A lighter, softer beige-gray, perfect for secondary backgrounds, card elements, or supporting text areas, adding gentle warmth.

accent

#5D4A3E - The deepest, richest brown, ideal for high-contrast elements, important buttons, or strong navigation accents, providing a solid anchor.

background

#E8E0D7 - A very light, warm off-white, excellent for clean, spacious backgrounds that allow the darker colors to stand out with comfort.

text

#5D4A3E - This deep brown provides excellent contrast and readability for body text against lighter backgrounds like #E8E0D7 or #D0C3B7.

Accessibility notes

  • Ensure #5D4A3E has strong contrast against #E8E0D7 for all text.
  • #8C7B6D should be tested for readability on #E8E0D7, especially for small text.
  • Avoid using #AE9C8C or #D0C3B7 for text on #E8E0D7 due to low contrast.
  • Always verify text and interactive element contrast with accessibility tools to meet WCAG guidelines.

Recommended combinations

Cozy Foundation

Creates a comfortable and readable layout for website backgrounds, main content, and call-to-action buttons.

#E8E0D7 · #8C7B6D · #5D4A3E

Tweed Layers

Excellent for UI elements like card backgrounds, subtle borders, or layered content blocks, adding depth and texture.

#D0C3B7 · #AE9C8C · #8C7B6D

Rich Contrast

Use the light off-white as a background, with the deep brown for impactful headings, and the mid-tone for supportive elements.

#E8E0D7 · #5D4A3E · #AE9C8C

CSS variables

:root {
  --woven-tweed-comfort-1: #5D4A3E;
  --woven-tweed-comfort-2: #8C7B6D;
  --woven-tweed-comfort-3: #AE9C8C;
  --woven-tweed-comfort-4: #D0C3B7;
  --woven-tweed-comfort-5: #E8E0D7;
}

Tailwind config

theme: {
  extend: {
    colors: {
      "woven-tweed-comfort": {
        1: "#5D4A3E",
        2: "#8C7B6D",
        3: "#AE9C8C",
        4: "#D0C3B7",
        5: "#E8E0D7",
      }
    }
  }
}

Related searches

tweed fabric colorscozy brown palettewarm neutral designrustic elegant schemeheritage brand colors

Palette colors

Hex values

Color 1#5D4A3E
·
Color 2#8C7B6D
·
Color 3#AE9C8C
·
Color 4#D0C3B7
·
Color 5#E8E0D7
·

Accessibility

Contrast checker

1
2
3
4
5
1
2.1:1Fail
3.2:1AA18
4.8:1AA
6.4:1AA
2
2.1:1Fail
1.5:1Fail
2.4:1Fail
3.1:1AA18
3
3.2:1AA18
1.5:1Fail
1.5:1Fail
2:1Fail
4
4.8:1AA
2.4:1Fail
1.5:1Fail
1.3:1Fail
5
6.4:1AA
3.1:1AA18
2:1Fail
1.3:1Fail

Similar palettes

More like Woven Tweed Comfort

View all neutral