Palette

Vintage Poster Fade

A soft, faded palette reminiscent of old advertising posters weathered by time and sunlight.

neutralretro5 colors

More neutral palettes

Preview

See it in context.

Interface

New

Ready when you are.

A quick look at how Vintage Poster Fade 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 Poster Fade.

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

Data visualization

#A87F68#C3A68F#E0D1BF#7E7E7E#5B5B5B

Palette guide

How to use Vintage Poster Fade

Overview

The Vintage Poster Fade palette presents a sophisticated array of muted browns and soft grays, perfectly capturing the essence of aged paper and weathered advertising posters. With a warm Rosy Brown `#A87F68`, a lighter Tan `#C3A68F`, a delicate Linen `#E0D1BF`, and two versatile grays `#7E7E7E` and `#5B5B5B`, this palette is ideal for designers and developers seeking a soft, understated retro aesthetic. These faded tones evoke a sense of history, authenticity, and gentle wear, providing a foundation for designs that feel both timeless and subtly elegant.

Best used for

Historical website designs and interfaces
Branding for artisanal or vintage products
Book cover designs and editorial layouts
Indie game art and visual storytelling
Packaging with a rustic or aged appeal
Minimalist design projects requiring warmth

Suggested color roles

primary

Utilize `#A87F68` (Rosy Brown) for headings or important UI elements, offering a warm, approachable anchor.

secondary

Apply `#5B5B5B` (dark gray) for secondary text, borders, or graphic elements to provide clear contrast.

accent

Employ `#E0D1BF` (Linen) as a soft highlight, for background textures, or light text on darker elements.

background

The delicate `#E0D1BF` (Linen) makes an excellent, clean yet warm background, reminiscent of aged paper.

text

For legible body text, `#5B5B5B` (dark gray) offers strong contrast, or use `#A87F68` for a softer, harmonious look.

Accessibility notes

Ensure sufficient contrast between `#5B5B5B` or `#7E7E7E` and lighter backgrounds like `#E0D1BF` for text.
Avoid using mid-tones like `#C3A68F` for small text on similar light backgrounds without testing.
The lightest color, `#E0D1BF`, should be paired with significantly darker colors for text to ensure readability.
Use a contrast checker to validate all text and interactive element color pairings meet WCAG standards.

Recommended combinations

Faded Contrast

Excellent for creating clear visual hierarchy with a dark text, light background, and warm accent.

#5B5B5B · #E0D1BF · #A87F68

Muted Harmony

Ideal for layered graphic elements, subtle gradients, or complementary UI components.

#C3A68F · #A87F68 · #7E7E7E

Soft Vintage

Use for delicate patterns, background details, or as a refined backdrop for imagery.

#E0D1BF · #7E7E7E · #C3A68F

CSS variables

:root {
  --vintage-poster-fade-1: #A87F68;
  --vintage-poster-fade-2: #C3A68F;
  --vintage-poster-fade-3: #E0D1BF;
  --vintage-poster-fade-4: #7E7E7E;
  --vintage-poster-fade-5: #5B5B5B;
}

Tailwind config

theme: {
  extend: {
    colors: {
      "vintage-poster-fade": {
        1: "#A87F68",
        2: "#C3A68F",
        3: "#E0D1BF",
        4: "#7E7E7E",
        5: "#5B5B5B",
      }
    }
  }
}

Hex values

Color 1#A87F68

Color 2#C3A68F

Color 3#E0D1BF

Color 4#7E7E7E

Color 5#5B5B5B

Accessibility

Contrast checker

1.6:1Fail

2.4:1Fail

1.1:1Fail

1.9:1Fail