Back to palettes

Palette

Sepia Memory

Evokes a sense of nostalgia with faded, sepia-toned hues reminiscent of old photographs and treasured memories.

neutralretro5 colors
More neutral palettes

Preview

See it in context.

Interface

New

Ready when you are.

A quick look at how Sepia Memory 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 Sepia Memory.

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

Data visualization

#A7936E#B9A887#D1C5B0#EBE1D3#7F6A4F

Palette guide

How to use Sepia Memory

Overview

The Sepia Memory palette beautifully evokes nostalgia with its faded, warm sepia-toned hues, reminiscent of treasured old photographs. Ranging from the deep #7F6A4F to the airy #EBE1D3, with versatile mid-tones like #A7936E and #B9A887, this collection provides a comforting and sophisticated vintage feel. Designers can utilize these hex codes to create branding or interfaces that convey warmth, history, and an understated elegance. Developers will find this palette excellent for crafting user experiences that feel timeless, inviting, and rich in character, ideal for projects seeking a harmonious blend of retro charm and modern usability.

Best used for

  • Nostalgic personal blogs or journals
  • Vintage product showcases
  • Family history and genealogy websites
  • Retro-inspired fashion or home decor brands
  • Photography and art exhibition sites
  • Cozy digital scrapbooking applications

Suggested color roles

primary

Use #7F6A4F for strong headers, footers, or primary content areas to establish a deep, grounding presence.

secondary

Apply #A7936E for subheadings, navigation, or larger text blocks, providing a warm and readable contrast.

accent

Employ #B9A887 sparingly for interactive elements, highlights, or small graphic details to add gentle emphasis.

background

Utilize #EBE1D3 as a soft, light background, offering an inviting and highly readable canvas for content.

text

For body text, #7F6A4F provides excellent contrast on lighter tones; a dark charcoal can also be used for optimal legibility.

Accessibility notes

  • Ensure sufficient contrast when using #7F6A4F or #A7936E for text on lighter backgrounds like #EBE1D3.
  • Avoid pairing #B9A887 with #D1C5B0 for small text to prevent readability issues due to low contrast.
  • Use #EBE1D3 as the primary background for critical text to maximize legibility.
  • Test all color combinations with accessibility checkers to ensure compliance, especially for interactive elements.

Recommended combinations

Classic Contrast

Ideal for clear headers on a light background with a supporting accent, perfect for content hierarchy.

#7F6A4F · #EBE1D3 · #A7936E

Muted Layers

Creates a sophisticated, layered look suitable for content sections or subtle graphic elements.

#A7936E · #D1C5B0 · #7F6A4F

Soft Fade

Excellent for background gradients or large visual elements that require a gentle, ethereal quality.

#B9A887 · #D1C5B0 · #EBE1D3

CSS variables

:root {
  --sepia-memory-1: #A7936E;
  --sepia-memory-2: #B9A887;
  --sepia-memory-3: #D1C5B0;
  --sepia-memory-4: #EBE1D3;
  --sepia-memory-5: #7F6A4F;
}

Tailwind config

theme: {
  extend: {
    colors: {
      "sepia-memory": {
        1: "#A7936E",
        2: "#B9A887",
        3: "#D1C5B0",
        4: "#EBE1D3",
        5: "#7F6A4F",
      }
    }
  }
}

Related searches

vintage sepia web designnostalgic color schemefaded photography paletteretro warm brownsold memories color

Palette colors

Hex values

Color 1#A7936E
·
Color 2#B9A887
·
Color 3#D1C5B0
·
Color 4#EBE1D3
·
Color 5#7F6A4F
·

Accessibility

Contrast checker

1
2
3
4
5
1
1.3:1Fail
1.8:1Fail
2.3:1Fail
1.7:1Fail
2
1.3:1Fail
1.4:1Fail
1.8:1Fail
2.2:1Fail
3
1.8:1Fail
1.4:1Fail
1.3:1Fail
3:1AA18
4
2.3:1Fail
1.8:1Fail
1.3:1Fail
4:1AA18
5
1.7:1Fail
2.2:1Fail
3:1AA18
4:1AA18

Similar palettes

More like Sepia Memory

View all neutral