Back to palettes

Palette

Ancient Amber Hues

Recalling the deep, fossilized resin with touches of ancient forest and sun-baked earth.

warmnatural5 colors
More warm palettes

Preview

See it in context.

Interface

New

Ready when you are.

A quick look at how Ancient Amber Hues 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 Ancient Amber Hues.

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

Data visualization

#A65B1A#D48B47#8A4D1F#E6C18B#5C3817

Palette guide

How to use Ancient Amber Hues

Overview

The 'Ancient Amber Hues' palette evokes the deep, fossilized resin with touches of ancient forest and sun-baked earth. This warm and earthy collection is perfect for designs aiming for a natural, rustic, or historical feel. Featuring rich tones like the deep amber of #A65B1A, the warm glow of #D48B47, and the grounding dark brown of #5C3817, it provides a cohesive, inviting aesthetic. The lighter shade, #E6C18B, offers a beautiful contrast, bringing warmth and light to the overall composition. It's a versatile palette for creating depth and an organic mood.

Best used for

  • Natural product branding (e.g., organic cosmetics)
  • Rustic interior design concepts
  • Autumn-themed digital art and illustrations
  • Editorial design with an earthy, historical feel
  • Forest or nature-inspired website themes
  • Artisanal craft packaging

Suggested color roles

primary

Use #A65B1A as a rich, inviting primary color for headers, main calls-to-action, or dominant graphic elements.

secondary

Apply #D48B47 for supportive elements, subheadings, or as a background for sections that need a softer warmth.

accent

Highlight key details or add a luminous touch with #E6C18B, ideal for subtle accents, borders, or hover states.

background

A gentle background can be created with #E6C18B, or for a deeper mood, consider using #8A4D1F with lighter text.

text

For optimal readability, use #5C3817 for body text and navigation, providing a strong, earthy contrast against lighter backgrounds.

Accessibility notes

  • Ensure sufficient contrast when pairing #E6C18B with any text color, preferring darker tones like #5C3817.
  • Use #A65B1A or #D48B47 for larger text elements to maintain readability against lighter backgrounds.
  • Interactive elements should use distinct shades, such as #8A4D1F for default states and #A65B1A for hover/active states.
  • Avoid using #D48B47 on #A65B1A for small text, as contrast may be insufficient for some users.

Recommended combinations

Deep Forest

Ideal for grounding main content areas, providing strong hierarchy and a rich, natural depth.

#5C3817 · #A65B1A · #D48B47

Amber Glow

Perfect for creating subtle gradients, luminous highlights, or soft background textures that evoke warmth.

#E6C18B · #D48B47 · #A65B1A

Earthy Contrast

Use a dark base with a bright accent and a very dark text for clear readability and visual interest.

#8A4D1F · #E6C18B · #5C3817

CSS variables

:root {
  --ancient-amber-hues-1: #A65B1A;
  --ancient-amber-hues-2: #D48B47;
  --ancient-amber-hues-3: #8A4D1F;
  --ancient-amber-hues-4: #E6C18B;
  --ancient-amber-hues-5: #5C3817;
}

Tailwind config

theme: {
  extend: {
    colors: {
      "ancient-amber-hues": {
        1: "#A65B1A",
        2: "#D48B47",
        3: "#8A4D1F",
        4: "#E6C18B",
        5: "#5C3817",
      }
    }
  }
}

Related searches

amber color paletteearthy design colorsnatural warm tonesforest brown hex codesrustic amber shades

Palette colors

Hex values

Color 1#A65B1A
·
Color 2#D48B47
·
Color 3#8A4D1F
·
Color 4#E6C18B
·
Color 5#5C3817
·

Accessibility

Contrast checker

1
2
3
4
5
1
1.8:1Fail
1.3:1Fail
3:1Fail
2:1Fail
2
1.8:1Fail
2.4:1Fail
1.6:1Fail
3.7:1AA18
3
1.3:1Fail
2.4:1Fail
3.9:1AA18
1.6:1Fail
4
3:1Fail
1.6:1Fail
3.9:1AA18
6.1:1AA
5
2:1Fail
3.7:1AA18
1.6:1Fail
6.1:1AA

Similar palettes

More like Ancient Amber Hues

View all warm