Palette

Rustic Barn Wood

Weathered browns and warm beige tones evoke the cozy, lived-in feel of an old wooden barn.

earthnatural5 colors

More earth palettes

Preview

See it in context.

Interface

New

Ready when you are.

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

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

Data visualization

#7D5D4E#B28E7C#E0C9B6#5A3C30#3B241E

Palette guide

How to use Rustic Barn Wood

Overview

The "Rustic Barn Wood" palette captures the authentic, cozy essence of timeworn timber. It features a very deep, grounding brown (#3B241E), a rich dark brown (#5A3C30), a warm medium brown (#7D5D4E), a lighter, inviting tan (#B28E7C), and a soft, creamy beige (#E0C9B6). This deeply harmonious range of earthy tones provides designers with an excellent foundation for creating warm, inviting, and authentic designs. Developers will find these colors ideal for building interfaces and materials that evoke natural comfort, heritage, and a sense of enduring quality, ensuring a consistently pleasant user experience.

Best used for

Organic food and beverage packaging
Cozy home decor and interior design websites
Rustic-themed event branding (e.g., weddings, retreats)
Artisan craft product branding
Photography presets for natural, warm aesthetics
Digital illustrations with a textured, organic feel

Suggested color roles

primary

Use the profound #3B241E for robust foundations like navigation, footers, or strong brand statements, exuding stability.

secondary

The rich #5A3C30 works well for main content areas or larger graphic elements, maintaining warmth and depth.

accent

#7D5D4E or #B28E7C can be used for subtle highlights, interactive elements, or decorative details where a gentle pop is desired.

background

#E0C9B6 offers a soft, luminous background that allows darker text and elements to stand out clearly and warmly.

text

For light backgrounds like #E0C9B6, use #3B241E or a deep charcoal for optimal readability. For darker backgrounds, #E0C9B6 is ideal.

Accessibility notes

Ensure sufficient contrast for text, especially when pairing lighter shades like #B28E7C against #E0C9B6 for small text.
#E0C9B6 provides an excellent light background, but always pair it with a very dark text color like #3B241E for readability.
Avoid using #7D5D4E for critical interface elements if it doesn't meet WCAG contrast ratios against adjacent colors.
Always verify contrast ratios for all text and interactive elements using an appropriate tool for compliance.

Recommended combinations

Deep Foundation

Excellent for establishing a rich, layered wood texture or a strong, grounded brand presence.

#3B241E · #5A3C30 · #7D5D4E

Warm Glow

Creates a soft, inviting atmosphere, perfect for hero sections, light UI elements, or subtle branding.

#E0C9B6 · #B28E7C · #7D5D4E

Rich Contrast

Provides strong visual separation, suitable for main headings, body text, and background pairings.

#3B241E · #E0C9B6 · #5A3C30

CSS variables

:root {
  --rustic-barn-wood-3-1: #7D5D4E;
  --rustic-barn-wood-3-2: #B28E7C;
  --rustic-barn-wood-3-3: #E0C9B6;
  --rustic-barn-wood-3-4: #5A3C30;
  --rustic-barn-wood-3-5: #3B241E;
}

Tailwind config

theme: {
  extend: {
    colors: {
      "rustic-barn-wood-3": {
        1: "#7D5D4E",
        2: "#B28E7C",
        3: "#E0C9B6",
        4: "#5A3C30",
        5: "#3B241E",
      }
    }
  }
}

Hex values

Color 1#7D5D4E

Color 2#B28E7C

Color 3#E0C9B6

Color 4#5A3C30

Color 5#3B241E

Accessibility

Contrast checker

2:1Fail

3.7:1AA18

1.7:1Fail

2.4:1Fail

2:1Fail

1.9:1Fail

3.3:1AA18

4.8:1AA

3.7:1AA18

1.9:1Fail

6.2:1AA

9.1:1AAA

1.7:1Fail

3.3:1AA18

6.2:1AA

1.5:1Fail

2.4:1Fail

4.8:1AA

9.1:1AAA

1.5:1Fail

Similar palettes

More like Rustic Barn Wood

View all earth

Aged Wood Stain

Farmhouse Barnwood Charm