Back to palettes

Palette

Deep Amber Resin

Rich, deep tones reminiscent of ancient tree resin, holding secrets from a bygone era.

darkdark5 colors
More dark palettes

Preview

See it in context.

Interface

New

Ready when you are.

A quick look at how Deep Amber Resin 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 Deep Amber Resin.

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

Data visualization

#8B4513#CD853F#A0522D#D2691E#B8860B

Palette guide

How to use Deep Amber Resin

Overview

The Deep Amber Resin palette offers a rich, earthy spectrum inspired by ancient tree resins, perfect for designs requiring warmth and a touch of vintage elegance. Featuring deep brown #8B4513, warm orange-brown #CD853F, and a vibrant amber #D2691E, this collection evokes a sense of history and natural beauty. Designers can leverage its organic depth for sophisticated branding, while developers will appreciate the clear progression of tones for UI elements, ensuring a cohesive and inviting user experience. This palette is ideal for projects aiming for a timeless, grounded aesthetic.

Best used for

  • Luxury product packaging
  • Vintage-inspired branding
  • Autumnal website themes
  • Interior design accents
  • E-commerce for artisanal goods
  • Nature-themed photography layouts

Suggested color roles

primary

Utilize #8B4513 as a grounding base for main sections, headers, or backgrounds, conveying stability and richness.

secondary

Apply #A0522D for supporting content, subheadings, or secondary navigation, providing a harmonious contrast.

accent

Highlight calls to action or key information with the vibrant #D2691E, drawing immediate attention.

background

Use #CD853F for a warm, inviting background, or the darker #8B4513 for a dramatic, luxurious feel.

text

For dark backgrounds, a light cream or off-white ensures readability. On lighter backgrounds like #CD853F, a deep charcoal or #8B4513 provides excellent contrast.

Accessibility notes

  • Ensure sufficient contrast between text and background, especially when using #CD853F or #B8860B as backgrounds.
  • Verify that interactive elements using #D2691E have a clear visual focus against surrounding colors.
  • Avoid placing light text on #B8860B without checking WCAG AA standards for readability.
  • Pair the darkest tones like #8B4513 with light text for optimal legibility in primary content areas.

Recommended combinations

Earthy Foundation

Ideal for main content blocks, providing a stable and natural feel with layered depth.

#8B4513 · #A0522D · #CD853F

Golden Glow

Perfect for highlight sections, banners, or decorative elements that need to radiate warmth.

#B8860B · #D2691E · #CD853F

Rich Contrast

Effective for creating visual hierarchy, with the deep brown anchoring vibrant accents.

#8B4513 · #D2691E · #B8860B

CSS variables

:root {
  --deep-amber-resin-1: #8B4513;
  --deep-amber-resin-2: #CD853F;
  --deep-amber-resin-3: #A0522D;
  --deep-amber-resin-4: #D2691E;
  --deep-amber-resin-5: #B8860B;
}

Tailwind config

theme: {
  extend: {
    colors: {
      "deep-amber-resin": {
        1: "#8B4513",
        2: "#CD853F",
        3: "#A0522D",
        4: "#D2691E",
        5: "#B8860B",
      }
    }
  }
}

Related searches

deep amber color schemevintage brown paletteearthy warm hex codesrich fall color designnatural resin tones

Palette colors

Hex values

Color 1#8B4513
·
Color 2#CD853F
·
Color 3#A0522D
·
Color 4#D2691E
·
Color 5#B8860B
·

Accessibility

Contrast checker

1
2
3
4
5
1
2.4:1Fail
1.3:1Fail
2:1Fail
2.2:1Fail
2
2.4:1Fail
1.9:1Fail
1.2:1Fail
1.1:1Fail
3
1.3:1Fail
1.9:1Fail
1.5:1Fail
1.7:1Fail
4
2:1Fail
1.2:1Fail
1.5:1Fail
1.1:1Fail
5
2.2:1Fail
1.1:1Fail
1.7:1Fail
1.1:1Fail

Similar palettes

More like Deep Amber Resin

View all dark
Ancient Library Gloom
Ancient Tome Hues
Coffee Bean Aroma
Dark Academia Realm
Dark Academia Study
Espresso Bean Rich