Palette

Aged Wood Stain

Deep, earthy browns and muted amber tones reflecting the rich patina of aged wood.

earthnatural5 colors

More earth palettes

Preview

See it in context.

Interface

New

Ready when you are.

A quick look at how Aged Wood Stain 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 Aged Wood Stain.

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

Data visualization

#8B4513#A0522D#C19C84#7E5E4E#5E3D2F

Palette guide

How to use Aged Wood Stain

Overview

The Aged Wood Stain palette features deep, earthy browns and muted amber tones, reflecting the rich patina of aged wood. With robust #5E3D2F and #7E5E4E, vibrant #8B4513 and #A0522D, and a lighter #C19C84, this collection is perfect for designers and developers seeking to evoke a natural, rustic, or cozy ambiance. These hex codes provide a versatile and warm foundation for projects that demand authenticity, a sense of heritage, and an inviting feel, ideal for furniture design, natural product branding, or digital environments that feel grounded and comfortable.

Best used for

Furniture restoration and woodworking
Rustic interior design blogs
Artisanal woodcraft marketing
Heritage brand websites
Cabin or lodge rental branding
Natural product packaging

Suggested color roles

primary

Utilize #5E3D2F as the deepest, most grounding shade for main headers, footers, or dominant brand elements, signifying strength.

secondary

Apply #7E5E4E for supporting sections, subheadings, or larger content blocks, offering a robust wood tone.

accent

Highlight key information or interactive elements with #8B4513, a vibrant, reddish-brown that adds a touch of warmth.

background

Choose #C19C84 for light, warm beige-brown backgrounds, mimicking aged timber for optimal readability.

text

For optimal readability on light backgrounds, #5E3D2F provides strong contrast. On darker backgrounds like #7E5E4E, #A0522D works well for text.

Accessibility notes

Ensure sufficient contrast between #C19C84 and darker text colors like #5E3D2F for readability.
The vibrant #8B4513 should be used carefully for text on mid-tones to ensure legibility.
Avoid using #A0522D as text on #8B4513 unless for very large, decorative headlines.
Prioritize contrast for interactive elements to ensure clear user feedback and usability.

Recommended combinations

Wood Grain Contrast

Ideal for a strong, rustic layout with deep brown text, a vibrant wood accent, and a soft, aged background.

#5E3D2F · #8B4513 · #C19C84

Stained Layers

Excellent for creating layered content with mid-tone elements on a lighter background, grounded by dark text.

#7E5E4E · #A0522D · #5E3D2F

Rustic Patina

Perfect for subtle transitions or soft, inviting sections, moving from the lightest background to robust, darker wood tones.

#C19C84 · #8B4513 · #7E5E4E

CSS variables

:root {
  --aged-wood-stain-1: #8B4513;
  --aged-wood-stain-2: #A0522D;
  --aged-wood-stain-3: #C19C84;
  --aged-wood-stain-4: #7E5E4E;
  --aged-wood-stain-5: #5E3D2F;
}

Tailwind config

theme: {
  extend: {
    colors: {
      "aged-wood-stain": {
        1: "#8B4513",
        2: "#A0522D",
        3: "#C19C84",
        4: "#7E5E4E",
        5: "#5E3D2F",
      }
    }
  }
}

Hex values

Color 1#8B4513

Color 2#A0522D

Color 3#C19C84

Color 4#7E5E4E

Color 5#5E3D2F

Accessibility

Contrast checker

1.3:1Fail

2.8:1Fail

1.2:1Fail

1.4:1Fail

1.3:1Fail

2.2:1Fail

1:1Fail

1.7:1Fail

2.8:1Fail

2.2:1Fail

2.3:1Fail

3.8:1AA18