Palette

Vintage Postcard Sepia

Evokes the faded, warm tones of antique photographs and postcards, capturing a sense of timeless nostalgia.

neutralretro5 colors

More neutral palettes

Preview

See it in context.

Interface

New

Ready when you are.

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

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

Data visualization

#5A4B42#7B6D62#9E9187#C5BCB5#EFEAE6

Palette guide

How to use Vintage Postcard Sepia

Overview

The Vintage Postcard Sepia palette offers a refined collection of muted, desaturated browns and creams, evoking the subtle elegance of aged photographs and historical documents. With shades ranging from a deep, grounding `#5A4B42` to a soft, almost-white `#EFEAE6`, this palette is perfect for designers and developers seeking a sophisticated, understated vintage aesthetic. The mid-tones like `#7B6D62`, `#9E9187`, and `#C5BCB5` provide excellent versatility, creating harmonious transitions that speak to timelessness, history, and a quiet sense of nostalgia without being overtly dramatic.

Best used for

Elegant historical website themes
Minimalist branding with a vintage touch
Archival or museum exhibition design
Subtle UI elements and background textures
Luxury product packaging with an aged feel
Photography presets for a sepia effect

Suggested color roles

primary

Assign `#5A4B42` (darkest brown) for primary text, navigation, or strong foundational elements to ensure legibility.

secondary

Utilize `#7B6D62` (medium-dark brown) for secondary content, subheadings, or as a rich border color.

accent

Apply `#EFEAE6` (lightest cream) for highlights, delicate ornaments, or as a pristine background for key information.

background

The soft `#EFEAE6` or `#C5BCB5` creates an ideal, subtle canvas, enhancing the vintage feel without overwhelming content.

text

For most body text, `#5A4B42` or a very dark charcoal provides excellent contrast against lighter backgrounds.

Accessibility notes

Ensure sufficient contrast for text, especially when using mid-tones like `#9E9187` on a light background like `#C5BCB5`.
The lightest color, `#EFEAE6`, should not be used for small text unless paired with a very dark background.
Prioritize using the darkest hues, `#5A4B42` and `#7B6D62`, for critical text elements for maximum readability.
Test color combinations for WCAG compliance, particularly for interactive elements, to ensure perceivable states.

Recommended combinations

Soft Gradient

Excellent for background transitions or layered graphic elements that require a gentle flow.

#EFEAE6 · #C5BCB5 · #9E9187

Deep Contrast

Perfect for creating a clean, legible layout with strong hierarchy between text and background.

#5A4B42 · #EFEAE6 · #7B6D62

Muted Harmony

Use for subtle UI components, borders, or as complementary shades in illustrations.

#9E9187 · #7B6D62 · #C5BCB5

CSS variables

:root {
  --vintage-postcard-sepia-1: #5A4B42;
  --vintage-postcard-sepia-2: #7B6D62;
  --vintage-postcard-sepia-3: #9E9187;
  --vintage-postcard-sepia-4: #C5BCB5;
  --vintage-postcard-sepia-5: #EFEAE6;
}

Tailwind config

theme: {
  extend: {
    colors: {
      "vintage-postcard-sepia": {
        1: "#5A4B42",
        2: "#7B6D62",
        3: "#9E9187",
        4: "#C5BCB5",
        5: "#EFEAE6",
      }
    }
  }
}

Hex values

Color 1#5A4B42

Color 2#7B6D62

Color 3#9E9187

Color 4#C5BCB5

Color 5#EFEAE6

Accessibility

Contrast checker

1.7:1Fail

2.7:1Fail

4.5:1AA18

7:1AA

1.7:1Fail

1.6:1Fail

2.7:1Fail

4.2:1AA18

2.7:1Fail

1.6:1Fail

2.6:1Fail

4.5:1AA18

2.7:1Fail

1.6:1Fail

7:1AA

4.2:1AA18

2.6:1Fail

1.6:1Fail

Similar palettes

Vintage Postcard Sepia

See it in context.

Ready when you are.

Built with Vintage Postcard Sepia.

How to use Vintage Postcard Sepia

Overview

Best used for

Suggested color roles

Accessibility notes

Recommended combinations

Soft Gradient

Deep Contrast

Muted Harmony

CSS variables

Tailwind config

Related searches

Hex values

Contrast checker

More like Vintage Postcard Sepia