Back to palettes

Palette

Worn Leather Patina

Rich, deep browns capturing the timeless character and worn beauty of aged leather.

earthnatural5 colors
More earth palettes

Preview

See it in context.

Interface

New

Ready when you are.

A quick look at how Worn Leather Patina 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 Worn Leather Patina.

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

Data visualization

#654321#8B4513#A0522D#B87333#5A3A1E

Palette guide

How to use Worn Leather Patina

Overview

The Worn Leather Patina palette captures the rich, evolving character of aged leather, offering a blend of deep and vibrant browns. It starts with the profound #5A3A1E, a robust base, and moves through the classic #654321. More vivid, warm tones like #8B4513 and #A0522D add a touch of rustic energy, while #B87333 provides a brighter, inviting highlight. This palette is invaluable for designers and developers aiming to convey authenticity, craftsmanship, and enduring quality. It's perfectly suited for projects that need to feel established, warm, and rich in history, reflecting the timeless beauty of natural materials and their graceful aging process.

Best used for

  • Heritage brand identity
  • Outdoors/adventure gear websites
  • Craft brewery or distillery branding
  • Antique restoration services
  • Organic food packaging
  • Traditional menswear e-commerce

Suggested color roles

primary

#5A3A1E - A very deep, anchoring brown, ideal for strong brand statements, navigation, or foundational UI.

secondary

#654321 - A classic, sturdy brown, excellent for subheadings, detailed content, or significant interactive elements.

accent

#8B4513 - A rich, reddish-brown that provides a warm and inviting accent for calls to action or key highlights.

background

#B87333 - While a strong color, it can serve as a warm, rustic background, especially when paired with very dark text or white text.

text

#5A3A1E - Provides strong contrast on lighter backgrounds. For backgrounds like #B87333, use white or a very light cream for readability.

Accessibility notes

  • Text in #5A3A1E on #B87333 will likely need careful testing for WCAG compliance.
  • Avoid placing #8B4513 or #A0522D text on similar mid-tone backgrounds.
  • Ensure sufficient contrast for icons and graphical elements against their backgrounds.
  • For lengthy text, prioritize very high contrast pairs to reduce eye strain.

Recommended combinations

Earthy Foundation

Creates a solid base with a warm, inviting accent and a brighter background.

#5A3A1E · #8B4513 · #B87333

Rustic Depth

Ideal for layered designs, conveying richness and texture in UI elements.

#654321 · #A0522D · #5A3A1E

Patina Glow

Excellent for subtle gradients or highlights that emulate the aged sheen of leather.

#8B4513 · #B87333 · #A0522D

CSS variables

:root {
  --worn-leather-patina-1: #654321;
  --worn-leather-patina-2: #8B4513;
  --worn-leather-patina-3: #A0522D;
  --worn-leather-patina-4: #B87333;
  --worn-leather-patina-5: #5A3A1E;
}

Tailwind config

theme: {
  extend: {
    colors: {
      "worn-leather-patina": {
        1: "#654321",
        2: "#8B4513",
        3: "#A0522D",
        4: "#B87333",
        5: "#5A3A1E",
      }
    }
  }
}

Related searches

rustic brown color schemeaged leather palettewarm earthy tonesvintage brown designnatural patina colors

Palette colors

Hex values

Color 1#654321
·
Color 2#8B4513
·
Color 3#A0522D
·
Color 4#B87333
·
Color 5#5A3A1E
·

Accessibility

Contrast checker

1
2
3
4
5
1
1.2:1Fail
1.6:1Fail
2.3:1Fail
1.2:1Fail
2
1.2:1Fail
1.3:1Fail
1.9:1Fail
1.4:1Fail
3
1.6:1Fail
1.3:1Fail
1.5:1Fail
1.8:1Fail
4
2.3:1Fail
1.9:1Fail
1.5:1Fail
2.7:1Fail
5
1.2:1Fail
1.4:1Fail
1.8:1Fail
2.7:1Fail

Similar palettes

More like Worn Leather Patina

View all earth
Gilded Tome Pages
Aged Manuscript Bindings
Artisan Leather Craft
Copper Kettle Warmth
Copper Patina Gleam
Old Book Leather