Palette

Vintage Postcard Hues

Muted browns and soft creams capture the nostalgic, faded charm of an old, sun-worn vintage postcard.

earthretro5 colors

More earth palettes

Preview

See it in context.

Interface

New

Ready when you are.

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

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

Data visualization

#A0522D#CD853F#D2B48C#E0B98B#FAFAD2

Palette guide

How to use Vintage Postcard Hues

Overview

The "Vintage Postcard Hues" palette captures a timeless, nostalgic aesthetic with its array of muted browns and soft creams. Anchored by the deep russet of #A0522D and the warm tan of #CD853F, it evokes the faded charm of antique ephemera. Complementary shades like the sandy #D2B48C and the lighter #E0B98B provide excellent versatility for backgrounds and secondary elements. The almost-white #FAFAD2 serves as a delicate highlight or primary background, ensuring a cohesive and gentle visual experience. This palette is ideal for projects aiming for a rustic, historical, or cozy feel, offering designers and developers a rich base for conveying warmth and heritage.

Best used for

Retro-themed websites or blogs
Branding for artisanal products or coffee shops
Print materials with a historical or rustic appeal
UI/UX for apps focused on journaling or memory keeping
Interior design visualization with a vintage touch
E-commerce for antique or handmade goods

Suggested color roles

primary

A deep, earthy russet #A0522D perfect for strong headings, call-to-action buttons, or significant graphic elements to ground the design.

secondary

A warm, inviting tan #CD853F that complements the primary, suitable for subheadings, active states, or accentuating information.

accent

A soft, light brown #E0B98B ideal for subtle highlights, interactive elements, or decorative details where a gentle pop is needed.

background

A delicate, near-white cream #FAFAD2 offering a clean, expansive canvas that enhances the vintage feel without being stark.

text

For dark text on light backgrounds like #FAFAD2 or #E0B98B, #A0522D ensures readability while maintaining the palette's warmth. Alternatively, a dark charcoal like #333333.

Accessibility notes

Ensure sufficient contrast between #A0522D text and lighter backgrounds like #FAFAD2 or #E0B98B for WCAG AA compliance.
Avoid using #E0B98B or #D2B48C for small text on #FAFAD2, as contrast may be insufficient.
Use a darker color like #A0522D or #CD853F for interactive elements to improve visibility and affordance.
Consider using a distinct outline or bolding for links if their color contrast with the background is borderline.

Recommended combinations

Classic Warmth

Ideal for a primary brand identity: #A0522D for logos, #FAFAD2 for backgrounds, and #CD853F for buttons or headlines.

#A0522D · #FAFAD2 · #CD853F

Soft Narrative

Excellent for content areas, with #D2B48C as a base, #E0B98B for secondary information, and #A0522D for key points.

#D2B48C · #E0B98B · #A0522D

Muted Highlight

Use #FAFAD2 as a main background, #CD853F for prominent text, and #D2B48C for subtle dividers or card elements.

#FAFAD2 · #CD853F · #D2B48C

CSS variables

:root {
  --vintage-postcard-hues-2-1: #A0522D;
  --vintage-postcard-hues-2-2: #CD853F;
  --vintage-postcard-hues-2-3: #D2B48C;
  --vintage-postcard-hues-2-4: #E0B98B;
  --vintage-postcard-hues-2-5: #FAFAD2;
}

Tailwind config

theme: {
  extend: {
    colors: {
      "vintage-postcard-hues-2": {
        1: "#A0522D",
        2: "#CD853F",
        3: "#D2B48C",
        4: "#E0B98B",
        5: "#FAFAD2",
      }
    }
  }
}

Hex values

Color 1#A0522D

Color 2#CD853F

Color 3#D2B48C

Color 4#E0B98B

Color 5#FAFAD2

Accessibility

Contrast checker

1.9:1Fail

2.8:1Fail

3.1:1AA18

5.3:1AA

1.9:1Fail

1.5:1Fail

1.6:1Fail

2.8:1Fail

1.5:1Fail

1.1:1Fail

1.8:1Fail

3.1:1AA18

1.6:1Fail

1.1:1Fail

1.7:1Fail

5.3:1AA

2.8:1Fail

1.8:1Fail

1.7:1Fail

Similar palettes

Vintage Postcard Hues

See it in context.

Ready when you are.

Built with Vintage Postcard Hues.

How to use Vintage Postcard Hues

Overview

Best used for

Suggested color roles

Accessibility notes

Recommended combinations

Classic Warmth

Soft Narrative

Muted Highlight

CSS variables

Tailwind config

Related searches

Hex values

Contrast checker

More like Vintage Postcard Hues