Palette

Weathered Barn Wood

Timeless browns and muted creams mimic aged timber and the cozy feel of a weathered barn.

neutralnatural5 colors

More neutral palettes

Preview

See it in context.

Interface

New

Ready when you are.

A quick look at how Weathered Barn Wood 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 Weathered Barn Wood.

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

Data visualization

#E3DAC9#C9B59D#A38B74#7C634E#5B4A3A

Palette guide

How to use Weathered Barn Wood

Overview

The "Weathered Barn Wood" palette offers a timeless collection of earthy neutrals, perfect for evoking rustic charm and natural warmth. Featuring shades from the soft, creamy #E3DAC9 to the deep, grounding #5B4A3A, this guide helps designers and developers apply its rich, organic tones effectively. Utilize the versatile #A38B74 as a primary hue, complemented by the lighter #C9B59D for backgrounds or secondary elements. The deeper #7C634E and #5B4A3A provide excellent contrast and depth, ideal for typography or bold accents. This palette is designed to create inviting, authentic digital and physical spaces, mirroring the cozy feel of aged timber.

Best used for

Farmhouse interior design websites
Rustic brand identities and logos
E-commerce sites for artisan goods or vintage furniture
Nature-themed mobile applications
Cozy blog layouts or personal portfolios
Environmental or sustainable product packaging

Suggested color roles

primary

#A38B74 - A versatile medium brown, ideal for main sections, headers, or primary UI elements where a warm, inviting presence is desired.

secondary

#7C634E - A richer, darker brown that pairs well with the primary, suitable for subheadings, active states, or detailed graphical elements to add depth.

accent

#5B4A3A - The deepest brown, perfect for strong call-to-action buttons, important icons, or impactful text accents that require high contrast and visual weight.

background

#E3DAC9 - The lightest, creamy hue, serving as a soft, warm base for pages, cards, or large design areas, ensuring readability and an airy feel.

text

#5B4A3A - This dark, deep brown offers excellent readability against lighter backgrounds like #E3DAC9 or #C9B59D, suitable for body text, headings, and crucial information.

Accessibility notes

Ensure #5B4A3A (text) has sufficient contrast against #E3DAC9 and #C9B59D (backgrounds) to meet WCAG AA standards.
Avoid placing #C9B59D text directly on #A38B74 backgrounds, as contrast may be insufficient for smaller text sizes.
Use a contrast checker for all text/background pairs, especially for interactive elements and small fonts.
When using #7C634E for text, ensure the background is significantly lighter, such as #E3DAC9, for optimal legibility.

Recommended combinations

Soft Rustic

Ideal for creating a gentle, inviting aesthetic on landing pages, blog posts, or product descriptions that require a light, airy feel.

#E3DAC9 · #C9B59D · #A38B74

Deep Earth

Excellent for establishing a sophisticated, grounded presence in headers, footers, or sections needing more visual weight and a sense of rich heritage.

#A38B74 · #7C634E · #5B4A3A

Barn Contrast

Best for designs requiring clear visual hierarchy and strong readability, such as user interfaces, forms, or data visualizations where elements need to stand out.

#E3DAC9 · #7C634E · #5B4A3A

CSS variables

:root {
  --weathered-barn-wood-2-1: #E3DAC9;
  --weathered-barn-wood-2-2: #C9B59D;
  --weathered-barn-wood-2-3: #A38B74;
  --weathered-barn-wood-2-4: #7C634E;
  --weathered-barn-wood-2-5: #5B4A3A;
}

Tailwind config

theme: {
  extend: {
    colors: {
      "weathered-barn-wood-2": {
        1: "#E3DAC9",
        2: "#C9B59D",
        3: "#A38B74",
        4: "#7C634E",
        5: "#5B4A3A",
      }
    }
  }
}

Hex values

Color 1#E3DAC9

Color 2#C9B59D

Color 3#A38B74

Color 4#7C634E

Color 5#5B4A3A

Accessibility

Contrast checker

1.4:1Fail

2.3:1Fail

4:1AA18

6.1:1AA

1.4:1Fail

1.6:1Fail

2.8:1Fail

4.3:1AA18

2.3:1Fail

1.6:1Fail

1.7:1Fail

2.6:1Fail

4:1AA18

2.8:1Fail

1.7:1Fail

1.5:1Fail

6.1:1AA

4.3:1AA18

2.6:1Fail

1.5:1Fail

Similar palettes

More like Weathered Barn Wood

View all neutral

Rustic Farmhouse Linen

Aged Scroll Patina

Rustic Farmhouse Feel

Aged Leather Comfort

Antique Library Pages

Antique Library Scroll