Palette

Vintage Postmark Hues

Soft, muted browns and creams reminiscent of aged paper and old world travels.

neutralretro5 colors

More neutral palettes

Preview

See it in context.

Interface

New

Ready when you are.

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

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

Data visualization

#EAE0CF#CDB486#8F6B4F#5C4B40#3D2B20

Palette guide

How to use Vintage Postmark Hues

Overview

The Vintage Postmark Hues palette offers a rich and authentic collection of deep browns and soft creams, perfectly capturing the essence of aged paper and historical documents. With a delicate Old Lace `#EAE0CF`, a warm Tan `#CDB486`, a robust Bistre `#8F6B4F`, a deep Coffee `#5C4B40`, and a profound Dark Liver `#3D2B20`, this palette is ideal for designers and developers aiming for a truly antique or retro aesthetic. These hues evoke the tactile quality of well-worn paper and the solemn beauty of historical artifacts, creating a grounded and inviting visual experience.

Best used for

Coffee shop branding and interior design
Historical museum exhibits and displays
Artisanal craft product packaging
Archival website interfaces and themes
Book cover designs for literary classics
Cozy UI themes for reading apps

Suggested color roles

primary

Utilize `#3D2B20` (Dark Liver) for strong headings, primary calls-to-action, or foundational elements due to its depth.

secondary

Apply `#5C4B40` (Coffee) for secondary text, subheadings, or as a rich border color to provide balance.

accent

Employ `#EAE0CF` (Old Lace) for delicate highlights, background textures, or light text on darker elements.

background

The soft `#EAE0CF` (Old Lace) or `#CDB486` (Tan) provides an excellent, warm and inviting base for content.

text

For maximum legibility, `#3D2B20` (Dark Liver) offers superior contrast against lighter backgrounds.

Accessibility notes

Ensure excellent contrast between `#3D2B20` or `#5C4B40` and lighter backgrounds like `#EAE0CF` for all text.
The lightest color, `#EAE0CF`, should not be used for small text unless paired with one of the darkest colors.
Prioritize using the darkest hues for critical information and interactive elements to ensure WCAG compliance.
Avoid placing medium-toned text, like `#CDB486`, on backgrounds of similar luminosity without rigorous testing.

Recommended combinations

Strong Vintage

Excellent for creating a dramatic, legible layout with deep text, light background, and warm accent.

#3D2B20 · #EAE0CF · #8F6B4F

Earthy Depth

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

#5C4B40 · #CDB486 · #8F6B4F

Faded Elegance

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

#EAE0CF · #CDB486 · #3D2B20

CSS variables

:root {
  --vintage-postmark-hues-1: #EAE0CF;
  --vintage-postmark-hues-2: #CDB486;
  --vintage-postmark-hues-3: #8F6B4F;
  --vintage-postmark-hues-4: #5C4B40;
  --vintage-postmark-hues-5: #3D2B20;
}

Tailwind config

theme: {
  extend: {
    colors: {
      "vintage-postmark-hues": {
        1: "#EAE0CF",
        2: "#CDB486",
        3: "#8F6B4F",
        4: "#5C4B40",
        5: "#3D2B20",
      }
    }
  }
}

Hex values

Color 1#EAE0CF

Color 2#CDB486

Color 3#8F6B4F

Color 4#5C4B40

Color 5#3D2B20

Accessibility

Contrast checker

1.5:1Fail

3.7:1AA18

6.3:1AA

10.3:1AAA