Palette

Vintage Postmark Hue

Soft, desaturated browns and creams reminiscent of aged paper and faded postmarks.

neutralretro5 colors

More neutral palettes

Preview

See it in context.

Interface

New

Ready when you are.

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

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

Data visualization

#5A4A3F#8B7A6F#BCAAA0#E0D3C4#4B3A32

Palette guide

How to use Vintage Postmark Hue

Overview

The Vintage Postmark Hue palette offers a refined collection of soft, desaturated browns and creams, evoking the subtle elegance of aged paper and historical postmarks. With shades ranging from a deep, grounding `#4B3A32` to a delicate `E0D3C4`, alongside versatile mid-tones like `#5A4A3F`, `#8B7A6F`, and `#BCAAA0`, this palette is perfect for designers and developers seeking an understated retro aesthetic. These hues create a harmonious, warm, and inviting atmosphere, ideal for projects that value authenticity, history, and a quiet sense of timelessness without being overtly bold.

Best used for

Book cover design for historical fiction
Minimalist website layouts with a warm touch
Branding for artisan crafts or antique shops
Digital art and illustration with a vintage feel
Mood boards and interior design concepts
Elegant product packaging and labeling

Suggested color roles

primary

Utilize `#4B3A32` (darkest brown) for primary text, navigation, or strong foundational elements to ensure legibility.

secondary

Apply `#5A4A3F` (deep brown) for secondary content, subheadings, or as a rich border color.

accent

Employ `#E0D3C4` (lightest cream) for highlights, delicate ornaments, or as a pristine background for key information.

background

The soft `#E0D3C4` or `#BCAAA0` creates an ideal, subtle canvas, enhancing the vintage feel without overwhelming content.

text

For most body text, `#4B3A32` or `#5A4A3F` provides excellent contrast against lighter backgrounds.

Accessibility notes

Ensure sufficient contrast for text, especially when using mid-tones like `#BCAAA0` on a light background like `#E0D3C4`.
The lightest color, `#E0D3C4`, should not be used for small text unless paired with a very dark background.
Prioritize using the darkest hues, `#4B3A32` and `#5A4A3F`, for critical text elements for maximum readability.
Test color combinations for WCAG compliance, particularly for interactive elements, to ensure perceivable states.

Recommended combinations

Deep Contrast

Perfect for creating a clean, legible layout with strong hierarchy between text and background.

#4B3A32 · #E0D3C4 · #8B7A6F

Subtle Gradient

Excellent for background transitions or layered graphic elements that require a gentle flow.

#E0D3C4 · #BCAAA0 · #8B7A6F

Warm Vintage

Use for subtle UI components, borders, or as complementary shades in illustrations.

#5A4A3F · #BCAAA0 · #E0D3C4

CSS variables

:root {
  --vintage-postmark-hue-1: #5A4A3F;
  --vintage-postmark-hue-2: #8B7A6F;
  --vintage-postmark-hue-3: #BCAAA0;
  --vintage-postmark-hue-4: #E0D3C4;
  --vintage-postmark-hue-5: #4B3A32;
}

Tailwind config

theme: {
  extend: {
    colors: {
      "vintage-postmark-hue": {
        1: "#5A4A3F",
        2: "#8B7A6F",
        3: "#BCAAA0",
        4: "#E0D3C4",
        5: "#4B3A32",
      }
    }
  }
}

Hex values

Color 1#5A4A3F

Color 2#8B7A6F

Color 3#BCAAA0

Color 4#E0D3C4

Color 5#4B3A32

Accessibility

Contrast checker

2.1:1Fail

3.8:1AA18

5.7:1AA

1.3:1Fail