Back to palettes

Palette

Sepia Memoir Hues

Muted, warm browns and tans, evoking the faded charm and sentimental memories of old photographs.

neutralretro5 colors
More neutral palettes

Preview

See it in context.

Interface

New

Ready when you are.

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

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

Data visualization

#8B4513#CD853F#D2B48C#F5DEB3#A0522D

Palette guide

How to use Sepia Memoir Hues

Overview

The Sepia Memoir Hues palette offers a rich, nostalgic journey through warm, muted browns and tans. With deep tones like #8B4513 and #A0522D, balanced by lighter shades such as #D2B48C and #F5DEB3, this collection evokes the faded charm of antique photographs and vintage aesthetics. Designers can leverage its earthy depth for branding that aims for a classic, timeless feel, while developers can implement these hex codes to create UI elements that exude warmth and historical elegance. This palette is perfect for projects requiring a sense of heritage, comfort, and understated sophistication.

Best used for

  • Vintage-themed branding and logos
  • Historical documentary websites
  • Retro photography portfolios
  • Cozy cafe or boutique interior design concepts
  • Classic book cover designs
  • Sentimental gift packaging

Suggested color roles

primary

Use #8B4513 for prominent headings or call-to-action buttons where a strong, grounded presence is desired.

secondary

Employ #CD853F for subheadings, navigation elements, or secondary graphic accents, offering a warm contrast.

accent

Apply #A0522D sparingly for impactful highlights, interactive elements, or small illustrations to draw attention.

background

Utilize #F5DEB3 as a soft, creamy base that provides excellent readability and a gentle, inviting feel.

text

For primary text, use a dark brown like #8B4513 for an integrated look, or a near-black for maximum contrast on light backgrounds.

Accessibility notes

  • Ensure sufficient contrast between #8B4513 or #A0522D and lighter backgrounds like #F5DEB3 for body text.
  • Avoid placing #CD853F directly on #D2B48C for small text due to potential low contrast issues.
  • Use #F5DEB3 for backgrounds with darker text colors for optimal readability across devices.
  • Test all text and interactive element color combinations against WCAG 2.1 guidelines for accessibility compliance.

Recommended combinations

Warm Contrast

Effective for clear headings on a light background with a subtle highlight, ideal for content hierarchy.

#8B4513 · #F5DEB3 · #CD853F

Earthy Depth

Creates a layered, grounded look suitable for vintage-style layouts, content blocks, or textured backgrounds.

#A0522D · #D2B48C · #8B4513

Soft Gradient

Excellent for subtle transitions or background elements that require a gentle, faded, and inviting effect.

#CD853F · #D2B48C · #F5DEB3

CSS variables

:root {
  --sepia-memoir-hues-1: #8B4513;
  --sepia-memoir-hues-2: #CD853F;
  --sepia-memoir-hues-3: #D2B48C;
  --sepia-memoir-hues-4: #F5DEB3;
  --sepia-memoir-hues-5: #A0522D;
}

Tailwind config

theme: {
  extend: {
    colors: {
      "sepia-memoir-hues": {
        1: "#8B4513",
        2: "#CD853F",
        3: "#D2B48C",
        4: "#F5DEB3",
        5: "#A0522D",
      }
    }
  }
}

Related searches

vintage sepia color paletteold photo brown colorsnostalgic design hex codesretro web design colorshistorical branding palette

Palette colors

Hex values

Color 1#8B4513
·
Color 2#CD853F
·
Color 3#D2B48C
·
Color 4#F5DEB3
·
Color 5#A0522D
·

Accessibility

Contrast checker

1
2
3
4
5
1
2.4:1Fail
3.6:1AA18
5.4:1AA
1.3:1Fail
2
2.4:1Fail
1.5:1Fail
2.3:1Fail
1.9:1Fail
3
3.6:1AA18
1.5:1Fail
1.5:1Fail
2.8:1Fail
4
5.4:1AA
2.3:1Fail
1.5:1Fail
4.3:1AA18
5
1.3:1Fail
1.9:1Fail
2.8:1Fail
4.3:1AA18

Similar palettes

More like Sepia Memoir Hues

View all neutral