Palette

Vintage Postcard Sepia

Muted, warm tones reminiscent of aged paper and sepia photographs from vintage postcards.

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

#704214#A0522D#D2B48C#F5DEB3#8B4513

Palette guide

How to use Vintage Postcard Sepia

Overview

The "Vintage Postcard Sepia" palette immerses users in a rich, warm, and deeply nostalgic experience, reminiscent of cherished sepia-toned photographs and aged paper. Featuring robust browns like #704214 and #8B4513, it provides a strong, earthy foundation. The mid-tone #A0522D adds a touch of russet warmth, while the lighter #D2B48C and the soft, near-cream #F5DEB3 offer versatile backgrounds and complementary highlights. This palette is perfectly suited for designers and developers aiming to evoke a sense of history, authenticity, and comforting retro charm in their digital interfaces, print designs, or branding, creating a truly timeless aesthetic.

Best used for

Genealogy websites or family history archives
Branding for traditional craft businesses
UI/UX for vintage photography or historical apps
E-commerce for antique books or collectibles
Editorial design for historical fiction or memoirs
Websites promoting heritage tourism

Suggested color roles

primary

A very deep, rich brown #704214, ideal for strong headings, primary navigation, or prominent brand elements, providing significant visual weight.

secondary

A warm, earthy russet #A0522D that complements the primary, suitable for subheadings, important links, or background sections.

accent

A strong, slightly more vibrant brown #8B4513 that can be used for call-to-action buttons, key data points, or subtle decorative elements, offering contrast.

background

A soft, warm, near-white cream #F5DEB3, offering an inviting and clean canvas that enhances the sepia effect.

text

For readable body text on light backgrounds like #F5DEB3 or #D2B48C, #704214 ensures optimal contrast and maintaining the palette's depth. A standard black or dark charcoal is also an option.

Accessibility notes

Ensure #704214 or #8B4513 text on #F5DEB3 or #D2B48C provides sufficient contrast for WCAG AA.
Avoid using #D2B48C or #F5DEB3 for small text on light backgrounds, as readability will be compromised.
Use the darker browns (#704214, #8B4513) for interactive elements to ensure clear visibility and affordance.
When using #A0522D as a background, pair it with #F5DEB3 for text or a very dark neutral for optimal contrast.

Recommended combinations

Classic Sepia

Primary branding: #704214 for logos/headers, #F5DEB3 for backgrounds, and #A0522D for buttons or highlights.

#704214 · #F5DEB3 · #A0522D

Rich Narrative

Content sections: #D2B48C as a base, #8B4513 for titles, and #704214 for body text or important quotes.

#8B4513 · #D2B48C · #704214

Subtle Depth

UI elements: #F5DEB3 for card backgrounds, #A0522D for icons, and #D2B48C for subtle borders.

#F5DEB3 · #A0522D · #D2B48C

CSS variables

:root {
  --vintage-postcard-sepia-2-1: #704214;
  --vintage-postcard-sepia-2-2: #A0522D;
  --vintage-postcard-sepia-2-3: #D2B48C;
  --vintage-postcard-sepia-2-4: #F5DEB3;
  --vintage-postcard-sepia-2-5: #8B4513;
}

Tailwind config

theme: {
  extend: {
    colors: {
      "vintage-postcard-sepia-2": {
        1: "#704214",
        2: "#A0522D",
        3: "#D2B48C",
        4: "#F5DEB3",
        5: "#8B4513",
      }
    }
  }
}

Hex values

Color 1#704214

Color 2#A0522D

Color 3#D2B48C

Color 4#F5DEB3

Color 5#8B4513

Accessibility

Contrast checker

1.5:1Fail

4.3:1AA18

6.4:1AA

1.2:1Fail

1.5:1Fail

2.8:1Fail

4.3:1AA18

1.3:1Fail

4.3:1AA18

2.8:1Fail

1.5:1Fail

3.6:1AA18

6.4:1AA

4.3:1AA18

1.5:1Fail

5.4:1AA

1.2:1Fail

1.3:1Fail

3.6:1AA18

5.4:1AA

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

Classic Sepia

Rich Narrative

Subtle Depth

CSS variables

Tailwind config

Related searches

Hex values

Contrast checker

More like Vintage Postcard Sepia