Vintage color palettes

Find vintage color palettes built from aged neutrals, softened reds, and familiar analog tones for brand systems, packaging, and editorial design.

Explore the toolbox

How to use vintage color palettes

Vintage palettes borrow from aged paper, sepia photographs, and old print: cream stock, tan and brown midtones, and a dark ink such as navy or near-black. They are less saturated than the retro collection, and many sets already include a color dark enough for text.

Where vintage palettes work

  • Menus, labels, and sites for cafés, bakeries, breweries, and craft goods
  • Long-form editorial and archive pages styled like printed matter
  • Packaging, posters, and illustration with a limited ink count
  • Portfolios for photography, letterpress, or restoration work

Two kinds of vintage in this collection

Most palettes here fall into one of two groups. The first is sepia: tan, brown, oxblood, and a near-black, as in #e4c59e, #af8260, #803d3b, #322c2b. The second is faded print color: a dusty blue, a mustard, and a tomato red that look like an old poster, as in #4793af, #ffc470, #dd5746, #8b322c.

Both share lowered saturation (about 49% HSL on average, against 63% for the retro collection) and a lean toward orange-brown hues. Unlike pastel or light palettes, around three in five vintage palettes already include a pair that reaches 4.5:1, because many sets end in a dark ink.

Build it like a print job: paper, ink, one spot color

Older print work often relied on a small number of inks on an off-white stock, and that limit is much of what makes a layout look vintage. Map the palette the same way. In #fefaf6, #eadbc8, #dac0a3, #102c57, the cream #fefaf6 is the paper, #eadbc8 and #dac0a3 are secondary surfaces and rules, and the navy #102c57 is the ink. Navy on the cream measures 13.30:1, and it still reaches 7.93:1 on the darkest tan.

Add a spot color only if the layout needs one for actions, and keep it to buttons and a few highlights.

css
:root {
  --paper: #fefaf6;
  --paper-2: #eadbc8;
  --rule: #dac0a3;
  --ink: #102c57;
}

/* Muting a modern accent toward the paper tone */
.badge {
  background: color-mix(in srgb, #4793af 85%, #e4c59e);
}

Aged, not muddy

Vintage layouts fail when every color drifts toward the same mid-brown. In the sepia palette above, #af8260 on #e4c59e is only 2.07:1. Use the darkest swatch for text instead: #322c2b on #e4c59e measures 8.35:1.

Watch for pure #ffffff panels next to cream surfaces, which make the cream look dirty. Paper textures and grain overlays can also lower text contrast, so test text over the texture itself, not over the flat color underneath.

Pairing the colors

Treat the lightest swatch as paper and the darkest as ink, and keep the colors in between for rules, secondary surfaces, and one spot color. Replace pure white with the palette's cream, and mute any modern accent by mixing a little tan into it.

Contrast and readability

Oxblood #803d3b on tan #e4c59e is 4.83:1, enough for body text with little margin. White on the mid-brown #af8260 is 3.40:1, so that brown suits large type and fills only. Paper textures and grain lower these numbers further, so measure over the texture.

Questions

How do I make colors look vintage in CSS?
Lower saturation, warm the whites, and limit the count. A practical method is to mix a little tan into each accent with color-mix(), for example color-mix(in srgb, #4793af 85%, #e4c59e), and to replace #ffffff with a cream such as #fefaf6.
What is the difference between vintage and retro colors?
On this site, vintage palettes are more muted and browner, while retro palettes are more saturated and include more purple, pink, and teal. Vintage borrows from aged paper and print; retro borrows from the pop graphics of particular decades.

Updated