Palette

Antique Leather

Rich and inviting browns, evoking the timeless elegance and warmth of well-worn leather.

earthnatural5 colors

More earth palettes

Preview

See it in context.

Interface

New

Ready when you are.

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

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

Data visualization

#8B4513#A0522D#CD853F#DEB887#BC8F8F

Palette guide

How to use Antique Leather

Overview

The Antique Leather palette offers a rich and inviting collection of browns, evoking the timeless elegance and warmth of well-worn, cherished leather. Ranging from the deep #8B4513 and #A0522D to the softer #CD853F and #DEB887, with a unique #BC8F8F, this palette is perfect for designs seeking a rustic, warm, and classic aesthetic. Designers and developers can utilize these versatile hues to craft interfaces, branding, or visuals that convey durability, authenticity, and a sense of established quality. It's ideal for projects related to craftsmanship, heritage brands, or any context where a grounded, natural, and inviting atmosphere is desired, blending comfort with refined strength.

Best used for

Rustic brand identity and logos
Vintage furniture e-commerce sites
Men's fashion and accessories branding
Cozy cafe or pub interior design
Outdoor adventure gear packaging
Warm, inviting UI elements

Suggested color roles

primary

Use #8B4513 as a strong, grounding primary color for main sections or deep backgrounds.

secondary

Apply #A0522D for supportive elements, subheadings, or to add a rich, warm layer.

accent

Highlight key information or interactive elements with #CD853F, providing a beautiful, aged sheen.

background

Employ #DEB887 for warm, inviting backgrounds that offer excellent contrast for darker text.

text

For text on lighter backgrounds like #DEB887, use #8B4513 or a deep charcoal for optimal readability. On darker shades, a light cream or white works best.

Accessibility notes

Ensure #8B4513 text on #DEB887 backgrounds meets WCAG AA contrast requirements.
Be cautious when pairing #CD853F with #A0522D for text to avoid low contrast issues.
Darker hues like #8B4513 and #A0522D provide excellent readability for headings.
Always test color combinations for readability, especially for body text and navigation links.

Recommended combinations

Rich Leather

Establishes a deep, luxurious leather foundation for branding or sophisticated UI elements.

#8B4513 · #A0522D · #CD853F

Worn Comfort

Ideal for creating a soft, inviting feel in backgrounds, secondary text, or decorative accents.

#DEB887 · #BC8F8F · #CD853F

Vintage Contrast

Use for strong visual hierarchy, contrasting deep browns with lighter tones for clarity and impact.

#8B4513 · #DEB887 · #A0522D

CSS variables

:root {
  --antique-leather-1: #8B4513;
  --antique-leather-2: #A0522D;
  --antique-leather-3: #CD853F;
  --antique-leather-4: #DEB887;
  --antique-leather-5: #BC8F8F;
}

Tailwind config

theme: {
  extend: {
    colors: {
      "antique-leather": {
        1: "#8B4513",
        2: "#A0522D",
        3: "#CD853F",
        4: "#DEB887",
        5: "#BC8F8F",
      }
    }
  }
}

Hex values

Color 1#8B4513

Color 2#A0522D

Color 3#CD853F

Color 4#DEB887

Color 5#BC8F8F

Accessibility

Contrast checker

1.3:1Fail

2.4:1Fail

3.8:1AA18

2.5:1Fail

1.3:1Fail

1.9:1Fail

3:1AA18

2:1Fail

2.4:1Fail

1.9:1Fail

1.6:1Fail

1.1:1Fail

3.8:1AA18

3:1AA18

1.6:1Fail

1.5:1Fail

2.5:1Fail

2:1Fail

1.1:1Fail

1.5:1Fail

Similar palettes

More like Antique Leather