Palette

Weathered Barn Reds

Earthy, warm reds reminiscent of a classic weathered barn, softened by years of sun and rain.

warmnatural5 colors

More warm palettes

Preview

See it in context.

Interface

New

Ready when you are.

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

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

Data visualization

#5C271E#8C3D2C#B75C41#D88165#F5B8A0

Palette guide

How to use Weathered Barn Reds

Overview

The "Weathered Barn Reds" palette evokes a sense of rustic charm and timeless warmth, perfect for designs seeking an inviting, earthy aesthetic. Featuring a spectrum from the deep, grounding #5C271E to the rich #8C3D2C and vibrant #B75C41, it culminates in the softer, sun-kissed #D88165 and delicate #F5B8A0. This collection of reds, reminiscent of aged timber and sun-faded paint, offers designers and developers a sophisticated range for creating cozy, authentic, and memorable user experiences. Its natural progression ensures harmonious visual flow, ideal for projects requiring an organic, established feel.

Best used for

Rustic farmhouse branding and websites
Vintage-inspired product packaging
Cozy cafe or restaurant interior design
Autumnal or holiday-themed digital content
Historical preservation project interfaces
Handcrafted goods e-commerce sites

Suggested color roles

primary

#5C271E - A deep, grounding red perfect for strong headings, navigation bars, or foundational brand elements. It conveys stability and heritage.

secondary

#8C3D2C - Excellent for subheadings, prominent buttons, or large content blocks, offering rich warmth without overpowering the primary.

accent

#B75C41 - Use this inviting mid-tone for call-to-action buttons, interactive elements, or key design details that need to draw attention.

background

#F5B8A0 - A soft, light red ideal for page backgrounds, card elements, or large sections where a gentle, warm base is desired.

text

#5C271E - Provides excellent contrast against lighter backgrounds like #F5B8A0 for primary body text, ensuring readability. A dark charcoal or near-black can also be used for general text against #F5B8A0.

Accessibility notes

Ensure sufficient contrast when using #D88165 or #B75C41 for text against #F5B8A0; generally, darker shades are preferred for body text.
Pair #5C271E or #8C3D2C with #F5B8A0 for optimal readability in large text blocks and interactive elements.
Avoid using #D88165 on #B75C41 for text or small icons due to insufficient contrast for many users.
Test color combinations for WCAG AA or AAA compliance, especially for critical UI elements and body text.

Recommended combinations

Rustic Elegance

Ideal for website headers, primary content areas, and elegant branding.

#5C271E · #B75C41 · #F5B8A0

Warm Highlight

Great for highlighting specific sections, call-out boxes, or subtle interactive elements.

#8C3D2C · #D88165 · #F5B8A0

Deep Contrast

Effective for text and background pairings, with #B75C41 for accent buttons or links.

#5C271E · #F5B8A0 · #B75C41

CSS variables

:root {
  --weathered-barn-reds-1: #5C271E;
  --weathered-barn-reds-2: #8C3D2C;
  --weathered-barn-reds-3: #B75C41;
  --weathered-barn-reds-4: #D88165;
  --weathered-barn-reds-5: #F5B8A0;
}

Tailwind config

theme: {
  extend: {
    colors: {
      "weathered-barn-reds": {
        1: "#5C271E",
        2: "#8C3D2C",
        3: "#B75C41",
        4: "#D88165",
        5: "#F5B8A0",
      }
    }
  }
}

Hex values

Color 1#5C271E

Color 2#8C3D2C

Color 3#B75C41

Color 4#D88165

Color 5#F5B8A0

Accessibility

Contrast checker

1.6:1Fail

2.6:1Fail

4.1:1AA18

6.9:1AA

1.6:1Fail

2.6:1Fail

4.3:1AA18

2.6:1Fail

1.6:1Fail

2.7:1Fail

4.1:1AA18

2.6:1Fail

1.6:1Fail

1.7:1Fail

6.9:1AA

4.3:1AA18

2.7:1Fail

1.7:1Fail

Similar palettes

More like Weathered Barn Reds

Weathered Barn Reds

See it in context.

Ready when you are.

Built with Weathered Barn Reds.

How to use Weathered Barn Reds

Overview

Best used for

Suggested color roles

Accessibility notes

Recommended combinations

Rustic Elegance

Warm Highlight

Deep Contrast

CSS variables

Tailwind config

Related searches

Hex values

Contrast checker

More like Weathered Barn Reds