Palette

Rusty Barn Tin

Evokes the weathered beauty of old barn tin, showing years of exposure with charming rustic rusts.

earthnatural5 colors

More earth palettes

Preview

See it in context.

Interface

New

Ready when you are.

A quick look at how Rusty Barn Tin 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 Rusty Barn Tin.

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

Data visualization

#5A3B30#8A5C4F#BA7F6E#E8A38E#F3D0C2

Palette guide

How to use Rusty Barn Tin

Overview

The Rusty Barn Tin palette offers a charming, rustic progression of warm, weathered tones, capturing the essence of aged metal and faded paint. Starting with the deep #5A3B30 (rich umber) and transitioning through inviting shades like #8A5C4F and #BA7F6E, it culminates in the soft, almost peachy #E8A38E and the delicate #F3D0C2 (very light peach). This harmonious blend is perfect for designers and developers aiming to evoke a sense of heritage, comfort, and natural, unpretentious beauty in their projects, whether digital interfaces, branding, or physical product designs.

Best used for

Farmhouse style decor and branding
Artisan craft and handmade product websites
Country lifestyle blogs and magazines
Vintage or antique shop branding
Cozy and inviting user interfaces
Historical conservation projects

Suggested color roles

primary

Use #5A3B30 as the grounding, dark base for large sections or headers, providing depth and stability.

secondary

Apply #8A5C4F or #BA7F6E for supporting content, adding warmth and a sense of aged texture.

accent

Employ #E8A38E for gentle highlights, soft calls to action, or decorative elements that need a faded, warm glow.

background

Utilize #F3D0C2 for a clean, light background that allows darker text to pop, or #5A3B30 for a cozy, dark aesthetic.

text

For light backgrounds like #F3D0C2, use #5A3B30 for primary text. For dark backgrounds, a very light cream or white (not in palette) is recommended.

Accessibility notes

Ensure #F3D0C2 provides sufficient contrast when used for text on #5A3B30 or #8A5C4F backgrounds.
Avoid using #E8A38E or #BA7F6E for small text on similar mid-tone backgrounds, as contrast may be low.
Prioritize high contrast for interactive elements, using #5A3B30 on #F3D0C2 for clarity.
Test readability of all text sizes, especially on textured or patterned backgrounds if applied.

Recommended combinations

Rustic Core

Ideal for main content areas: #5A3B30 for headers/dark text, #F3D0C2 for background, and #8A5C4F for accents.

#5A3B30 · #F3D0C2 · #8A5C4F

Faded Warmth

Creates a soft, aged look for sections like testimonials or image overlays, emphasizing a gentle, warm palette.

#8A5C4F · #E8A38E · #BA7F6E

Light & Airy

Use #F3D0C2 for clean backgrounds, #5A3B30 for main text, and #E8A38E for subtle highlights or secondary text.

#F3D0C2 · #5A3B30 · #E8A38E

CSS variables

:root {
  --rusty-barn-tin-1: #5A3B30;
  --rusty-barn-tin-2: #8A5C4F;
  --rusty-barn-tin-3: #BA7F6E;
  --rusty-barn-tin-4: #E8A38E;
  --rusty-barn-tin-5: #F3D0C2;
}

Tailwind config

theme: {
  extend: {
    colors: {
      "rusty-barn-tin": {
        1: "#5A3B30",
        2: "#8A5C4F",
        3: "#BA7F6E",
        4: "#E8A38E",
        5: "#F3D0C2",
      }
    }
  }
}

Hex values

Color 1#5A3B30

Color 2#8A5C4F

Color 3#BA7F6E

Color 4#E8A38E

Color 5#F3D0C2

Accessibility

Contrast checker

1.8:1Fail

3:1AA18

4.8:1AA

6.9:1AA

1.8:1Fail

1.7:1Fail

2.7:1Fail

3.9:1AA18