Palette

Vintage Postcard Blue

Muted blues, faded by time, reminiscent of nostalgic postcards from coastal towns.

coolretro5 colors

More cool palettes

Preview

See it in context.

Interface

New

Ready when you are.

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

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

Data visualization

#0A2E36#134658#24687F#4899A3#7DCACF

Palette guide

How to use Vintage Postcard Blue

Overview

The Vintage Postcard Blue palette delivers a captivating range of muted blues, faded by time, perfectly reminiscent of nostalgic postcards from coastal towns. This cool-toned spectrum features the deep, mysterious #0A2E36, providing a solid foundation, and transitions to the light, airy #7DCACF, like a hazy sky. Mid-tones such as #134658, #24687F, and #4899A3 offer harmonious gradations, adding depth and character. Designers can leverage these hues to evoke a sense of wanderlust, calm, and historical charm, making it ideal for travel-themed projects, maritime branding, or designs seeking a serene, retro ambiance.

Best used for

Travel and tourism websites
Nautical or coastal-themed branding
Historical maritime exhibits
Vintage-inspired app interfaces
Editorial design for travel magazines
Packaging for sea-themed products

Suggested color roles

primary

A balanced, muted blue that serves as a versatile primary color, conveying calm and a sense of aged elegance for main content with #24687F.

secondary

A deeper, more serious blue, excellent for secondary elements, subheadings, or background sections that require more gravitas with #134658.

accent

A brighter, more vibrant blue-green that provides a refreshing accent, perfect for call-to-action buttons, icons, or important highlights with #4899A3.

background

A very light, airy blue, #7DCACF, ideal for backgrounds, evoking a faded sky or tranquil water, ensuring good readability for darker text.

text

The darkest, most grounding shade, #0A2E36, perfect for body text and headlines, ensuring high readability and a strong, elegant presence.

Accessibility notes

Ensure #0A2E36 text on #7DCACF backgrounds meets WCAG AA or AAA contrast standards.
Avoid using #4899A3 or #24687F for small text on similar light backgrounds, as contrast may be insufficient.
Always check the contrast ratios for all interactive elements to ensure they are easily discernible.
For critical readability, a pure black or very dark grey might be necessary if the darkest palette color doesn't provide enough contrast on certain mid-tones.

Recommended combinations

Ocean Depths

Classic pairing for text on a light, faded blue background, ensuring legibility and a serene feel.

#7DCACF · #0A2E36 · #134658

Coastal Layers

Creates harmonious depth for headers, subheadings, and layered UI components with a vintage maritime touch.

#134658 · #24687F · #4899A3

Faded Horizon

Use the mid-blue as a key element against the light base, with the darkest for strong visual anchors.

#7DCACF · #24687F · #0A2E36

CSS variables

:root {
  --vintage-postcard-blue-1: #0A2E36;
  --vintage-postcard-blue-2: #134658;
  --vintage-postcard-blue-3: #24687F;
  --vintage-postcard-blue-4: #4899A3;
  --vintage-postcard-blue-5: #7DCACF;
}

Tailwind config

theme: {
  extend: {
    colors: {
      "vintage-postcard-blue": {
        1: "#0A2E36",
        2: "#134658",
        3: "#24687F",
        4: "#4899A3",
        5: "#7DCACF",
      }
    }
  }
}

Hex values

Color 1#0A2E36

Color 2#134658

Color 3#24687F

Color 4#4899A3

Color 5#7DCACF

Accessibility

Contrast checker

1.4:1Fail

2.3:1Fail

4.4:1AA18

7.7:1AAA