Palette

Postcard Nostalgia Blue

Captures the soft, melancholic beauty of an old postcard, with muted blues and a touch of faded red.

retroretro5 colors

More retro palettes

Preview

See it in context.

Interface

New

Ready when you are.

A quick look at how Postcard Nostalgia Blue 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 Postcard Nostalgia Blue.

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

Data visualization

#B0C4DE#708090#A9A9A9#CD5C5C#D3D3D3

Palette guide

How to use Postcard Nostalgia Blue

Overview

The Postcard Nostalgia Blue palette captures the soft, melancholic beauty of an old postcard, blending muted blues, grays, and a touch of faded red. This retro-inspired scheme features the gentle steel blue of #B0C4DE, the cool slate gray of #708090, the soft medium gray of #A9A9A9, and the vintage brick red of #CD5C5C. Designers can leverage these hues to create charming, retro, and understated aesthetics. Developers will find them excellent for crafting nostalgic user interfaces, muted backgrounds, or subtle interactive elements, ensuring a harmonious and comforting digital presence that feels both classic and inviting.

Best used for

Vintage-themed websites and blogs
Historical or archival digital projects
Travel and photography portfolios
Retro brand identity and packaging
Storytelling and editorial design
Cozy interior design concepts

Suggested color roles

primary

#D3D3D3 - A very light gray, ideal for main backgrounds, providing a soft, aged canvas that feels gentle.

secondary

#B0C4DE - A muted steel blue, excellent for secondary content areas, card backgrounds, or subtle dividers, adding a touch of color.

accent

#CD5C5C - A faded brick red, perfect for calls-to-action, important links, or key highlights that need to stand out with a vintage feel.

background

#D3D3D3 - Offers a light, neutral, and slightly aged backdrop. #A9A9A9 can be used for a more substantial, but still muted, background.

text

For light backgrounds, a dark gray or charcoal (e.g., #3C4048) provides good contrast. For darker shades like #708090, white text is recommended.

Accessibility notes

Ensure sufficient contrast between text and the lighter background shades like #D3D3D3 and #B0C4DE.
The medium grays (#A9A9A9) may require darker text; always check contrast ratios against WCAG AA standards.
#CD5C5C can support white text, but verify readability. For smaller text, a darker contrast might be necessary.
Avoid using similar muted tones for interactive elements if they lack sufficient contrast from their surroundings.

Recommended combinations

Faded Memory

Creates a soft, harmonious, and slightly melancholic base for vintage designs.

#D3D3D3 · #B0C4DE · #A9A9A9

Retro Accent

A balanced trio for adding a pop of vintage red against muted blues and grays.

#B0C4DE · #A9A9A9 · #CD5C5C

Old Letter

Provides a stronger contrast, suitable for headers, footers, or key narrative blocks.

#D3D3D3 · #708090 · #CD5C5C

CSS variables

:root {
  --postcard-nostalgia-blue-1: #B0C4DE;
  --postcard-nostalgia-blue-2: #708090;
  --postcard-nostalgia-blue-3: #A9A9A9;
  --postcard-nostalgia-blue-4: #CD5C5C;
  --postcard-nostalgia-blue-5: #D3D3D3;
}

Tailwind config

theme: {
  extend: {
    colors: {
      "postcard-nostalgia-blue": {
        1: "#B0C4DE",
        2: "#708090",
        3: "#A9A9A9",
        4: "#CD5C5C",
        5: "#D3D3D3",
      }
    }
  }
}

Hex values

Color 1#B0C4DE

Color 2#708090

Color 3#A9A9A9

Color 4#CD5C5C

Color 5#D3D3D3

Accessibility

Contrast checker

2.3:1Fail

1.3:1Fail

2.2:1Fail

1.2:1Fail

2.3:1Fail

1.7:1Fail

1:1Fail

2.7:1Fail

1.3:1Fail

1.7:1Fail

1.6:1Fail

2.2:1Fail

1:1Fail

1.7:1Fail

2.7:1Fail

1.2:1Fail

2.7:1Fail

1.6:1Fail

2.7:1Fail

Similar palettes

Postcard Nostalgia Blue

See it in context.

Ready when you are.

Built with Postcard Nostalgia Blue.

How to use Postcard Nostalgia Blue

Overview

Best used for

Suggested color roles

Accessibility notes

Recommended combinations

Faded Memory

Retro Accent

Old Letter

CSS variables

Tailwind config

Related searches

Hex values

Contrast checker

More like Postcard Nostalgia Blue