Palette

Vintage Postcard Memories

Faded browns and soft blues, like a cherished postcard from yesteryear.

neutralretro5 colors

More neutral palettes

Preview

See it in context.

Interface

New

Ready when you are.

A quick look at how Vintage Postcard Memories 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 Vintage Postcard Memories.

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

Data visualization

#D2B48C#F5DEB3#B0C4DE#8B7355#696969

Palette guide

How to use Vintage Postcard Memories

Overview

The "Vintage Postcard Memories" palette beautifully blends soft, faded browns with tranquil blues, evoking the gentle charm of old, treasured keepsakes. The palette is grounded by the versatile tan of #D2B48C and the lighter, almost-cream #F5DEB3, providing excellent base tones. A serene, muted blue, #B0C4DE, introduces a calming contrast, reminiscent of faded skies or distant horizons. The deeper #8B7355 offers a rich, earthy anchor, while #696969 provides a reliable mid-tone gray for text or subtle shadows. This combination is ideal for designers and developers aiming for a sophisticated yet comforting retro aesthetic, perfect for conveying history and quiet reflection.

Best used for

Memory-themed websites or digital journals
Branding for antique shops or heritage brands
UI/UX for photography portfolios with a vintage filter
Educational materials on historical topics
E-commerce for curated vintage home decor
Print design for personal memoirs or family albums

Suggested color roles

primary

A deep, warm brown #8B7355, perfect for strong headings, primary navigation, or prominent brand elements, providing a sense of age and depth.

secondary

A soft, faded blue #B0C4DE that provides a gentle, cool contrast, suitable for secondary information, interactive states, or background sections.

accent

A versatile mid-tone gray #696969, excellent for subtle details, outlines, or as a sophisticated alternative to pure black for text.

background

A very light, warm cream #F5DEB3 that serves as an inviting and soft primary background, allowing other colors to softly emerge.

text

For body text on light backgrounds like #F5DEB3 or #D2B48C, #8B7355 ensures readability and maintaining the palette's muted character. A very dark gray like #333333 also works well.

Accessibility notes

Ensure #8B7355 text on #F5DEB3 or #D2B48C provides sufficient contrast for WCAG AA.
Avoid using #D2B48C or #F5DEB3 for small text on light backgrounds as contrast will be poor.
The #B0C4DE blue might require careful pairing for text; use #8B7355 or a dark charcoal for readability.
Use #696969 for outlines or borders on interactive elements to ensure they are clearly visible.

Recommended combinations

Faded Elegance

Main website theme: #F5DEB3 as primary background, #8B7355 for headers/text, and #B0C4DE for navigation highlights.

#8B7355 · #F5DEB3 · #B0C4DE

Quiet Contrast

For content cards or sections: #D2B48C as background, #696969 for secondary text, and #8B7355 for titles.

#D2B48C · #696969 · #8B7355

Subtle Highlight

Gentle UI elements: #F5DEB3 for a canvas, #B0C4DE for subtle separators, and #D2B48C for hover states.

#F5DEB3 · #B0C4DE · #D2B48C

CSS variables

:root {
  --vintage-postcard-memories-1: #D2B48C;
  --vintage-postcard-memories-2: #F5DEB3;
  --vintage-postcard-memories-3: #B0C4DE;
  --vintage-postcard-memories-4: #8B7355;
  --vintage-postcard-memories-5: #696969;
}

Tailwind config

theme: {
  extend: {
    colors: {
      "vintage-postcard-memories": {
        1: "#D2B48C",
        2: "#F5DEB3",
        3: "#B0C4DE",
        4: "#8B7355",
        5: "#696969",
      }
    }
  }
}

Hex values

Color 1#D2B48C

Color 2#F5DEB3

Color 3#B0C4DE

Color 4#8B7355

Color 5#696969

Accessibility

Contrast checker

1.5:1Fail

1.1:1Fail

2.3:1Fail

2.8:1Fail