Back to palettes

Palette

Sepia Memory Lane

Soft, desaturated tones reminiscent of cherished, faded photographs tucked away in an old family album.

neutralretro5 colors
More neutral palettes

Preview

See it in context.

Interface

New

Ready when you are.

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

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

Data visualization

#8B7A6A#A6978A#C2B3A6#DDD0C1#9D8C7A

Palette guide

How to use Sepia Memory Lane

Overview

The Sepia Memory Lane palette offers a refined collection of soft, desaturated browns and greys, perfectly capturing the essence of cherished, faded photographs. With hues ranging from the grounding #8B7A6A to the airy #DDD0C1, and including the versatile #A6978A, this palette provides a sophisticated, muted foundation for any design. Designers can leverage its subtle elegance for branding that seeks a timeless, understated appeal. Developers will find these hex codes ideal for creating user interfaces that evoke a sense of calm, history, and gentle nostalgia, avoiding harsh contrasts for a harmonious visual experience.

Best used for

  • Elegant vintage wedding photography sites
  • Museum or archive digital displays
  • Minimalist retro lifestyle blogs
  • High-end antique shop branding
  • Classic literature website designs
  • Sophisticated personal portfolios

Suggested color roles

primary

Use #8B7A6A for main navigation, sturdy headers, or primary content blocks to establish a grounded feel.

secondary

Apply #A6978A for subheadings, borders, or secondary information, offering gentle depth.

accent

Employ #9D8C7A sparingly for subtle highlights or interactive elements that need a touch of emphasis without being jarring.

background

Utilize #DDD0C1 as a soft, almost off-white background to provide a clean, readable canvas.

text

For body text, #8B7A6A offers excellent readability on lighter backgrounds; a dark charcoal can also be used for maximum contrast.

Accessibility notes

  • Ensure sufficient contrast when using #8B7A6A or #9D8C7A for text on lighter backgrounds like #DDD0C1.
  • Avoid pairing #A6978A with #C2B3A6 for small text to maintain readability.
  • Use #DDD0C1 as the primary background for content to ensure maximum legibility for most users.
  • Always verify color combinations against WCAG guidelines, especially for interactive elements and form fields.

Recommended combinations

Soft Contrast

Ideal for clear headings on a light background with a supporting element, creating a gentle hierarchy.

#8B7A6A · #DDD0C1 · #A6978A

Muted Depth

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

#9D8C7A · #C2B3A6 · #8B7A6A

Faded Elegance

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

#A6978A · #C2B3A6 · #DDD0C1

CSS variables

:root {
  --sepia-memory-lane-1: #8B7A6A;
  --sepia-memory-lane-2: #A6978A;
  --sepia-memory-lane-3: #C2B3A6;
  --sepia-memory-lane-4: #DDD0C1;
  --sepia-memory-lane-5: #9D8C7A;
}

Tailwind config

theme: {
  extend: {
    colors: {
      "sepia-memory-lane": {
        1: "#8B7A6A",
        2: "#A6978A",
        3: "#C2B3A6",
        4: "#DDD0C1",
        5: "#9D8C7A",
      }
    }
  }
}

Related searches

faded sepia tonesvintage neutral palettehistoric brown grey colorssubtle retro designold photograph aesthetic

Palette colors

Hex values

Color 1#8B7A6A
·
Color 2#A6978A
·
Color 3#C2B3A6
·
Color 4#DDD0C1
·
Color 5#9D8C7A
·

Accessibility

Contrast checker

1
2
3
4
5
1
1.5:1Fail
2:1Fail
2.7:1Fail
1.3:1Fail
2
1.5:1Fail
1.4:1Fail
1.9:1Fail
1.1:1Fail
3
2:1Fail
1.4:1Fail
1.3:1Fail
1.6:1Fail
4
2.7:1Fail
1.9:1Fail
1.3:1Fail
2.1:1Fail
5
1.3:1Fail
1.1:1Fail
1.6:1Fail
2.1:1Fail

Similar palettes

More like Sepia Memory Lane

View all neutral