Palette

Rustic Barn Dance

Reflects the warm, welcoming spirit of a rustic barn dance, combining deep reds with earthy tones.

earthretro5 colors

More earth palettes

Preview

See it in context.

Interface

New

Ready when you are.

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

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

Data visualization

#A23336#70421C#F5E9D7#7E8C68#4A4A4A

Palette guide

How to use Rustic Barn Dance

Overview

The "Rustic Barn Dance" palette evokes the lively yet grounded spirit of a country gathering. It combines a rich barn red (#A23336), a deep woody brown (#70421C), a soft, creamy off-white (#F5E9D7), a muted sage green (#7E8C68), and a versatile charcoal gray (#4A4A4A). This unique blend offers designers the ability to create designs that feel both vibrant and natural, with a hint of vintage charm. Developers will find this palette adaptable for various applications, from robust branding to subtle interface elements, ensuring a cohesive and inviting user experience.

Best used for

Event branding for country fairs or themed parties
Farm-to-table restaurant branding and menus
Vintage-inspired web design or blogs
Packaging for artisanal goods or craft beverages
Interior design accents for rustic or farmhouse styles
Digital illustrations with a charming, nostalgic feel

Suggested color roles

primary

#A23336 can be used as a striking primary, perfect for headings, call-to-actions, or brand focal points.

secondary

The deep #70421C works well for navigation, footers, or background sections, providing a solid foundation.

accent

#7E8C68 offers a subtle, earthy accent for iconography, subtle highlights, or secondary interactive elements.

background

#F5E9D7 provides a clean, warm background that allows the richer colors to pop effectively.

text

For light backgrounds like #F5E9D7, use #4A4A4A or #70421C for excellent readability. For dark backgrounds, #F5E9D7 is ideal.

Accessibility notes

Ensure sufficient contrast between #F5E9D7 and text; always pair with a dark color like #4A4A4A for readability.
The red #A23336, while vibrant, needs careful contrast checking when used for text against light backgrounds.
#7E8C68 may lack sufficient contrast for small text against #F5E9D7; reserve it for larger elements or accents.
Always use a contrast checker for all text and interactive elements to meet WCAG guidelines.

Recommended combinations

Lively Contrast

Great for bold headlines, main content, and a clean background, creating an energetic yet grounded feel.

#A23336 · #F5E9D7 · #70421C

Earthy Harmony

Creates a soft, natural, and inviting atmosphere, suitable for background textures or subtle branding.

#70421C · #7E8C68 · #F5E9D7

Modern Rustic

A sophisticated combination, perfect for modern rustic interfaces or impactful marketing materials.

#4A4A4A · #A23336 · #F5E9D7

CSS variables

:root {
  --rustic-barn-dance-2-1: #A23336;
  --rustic-barn-dance-2-2: #70421C;
  --rustic-barn-dance-2-3: #F5E9D7;
  --rustic-barn-dance-2-4: #7E8C68;
  --rustic-barn-dance-2-5: #4A4A4A;
}

Tailwind config

theme: {
  extend: {
    colors: {
      "rustic-barn-dance-2": {
        1: "#A23336",
        2: "#70421C",
        3: "#F5E9D7",
        4: "#7E8C68",
        5: "#4A4A4A",
      }
    }
  }
}

Hex values

Color 1#A23336

Color 2#70421C

Color 3#F5E9D7

Color 4#7E8C68

Color 5#4A4A4A

Accessibility

Contrast checker

1.2:1Fail

5.7:1AA

1.9:1Fail

1.3:1Fail

1.2:1Fail

7.1:1AAA

2.3:1Fail

1:1Fail

5.7:1AA

7.1:1AAA

3:1AA18

7.4:1AAA