Palette

Vintage Film Grain

Muted, desaturated tones recall the timeless aesthetic of old film photography, with a nostalgic and soft visual texture.

retroretro5 colors

More retro palettes

Preview

See it in context.

Interface

New

Ready when you are.

A quick look at how Vintage Film Grain 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 Film Grain.

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

Data visualization

#A08A74#C7B9A3#6F6E7B#3A3A3A#E8E0D7

Palette guide

How to use Vintage Film Grain

Overview

The Vintage Film Grain palette captures the essence of classic photography with its muted, desaturated tones, offering a nostalgic and sophisticated aesthetic. Featuring a warm beige like #A08A74, a softer tan #C7B9A3, and a cool, subtle grey-blue #6F6E7B, this collection creates a timeless visual texture. The deep charcoal #3A3A3A provides grounding contrast, while the near-white #E8E0D7 acts as a perfect canvas. This palette is ideal for projects seeking a retro, understated elegance, reminiscent of old film, providing a soft yet impactful visual experience for designers and developers alike.

Best used for

Photography portfolio websites or blogs
Retro-themed branding and marketing materials
Film festival promotions or cinema-related designs
UI/UX designs for apps with a historical or artistic focus
Editorial layouts for vintage-inspired magazines
Digital art projects aiming for a nostalgic, faded look

Suggested color roles

primary

Use #A08A74 as a primary color for large sections or headers, providing a warm, inviting base.

secondary

Employ #C7B9A3 for supporting elements, backgrounds, or secondary text to maintain a soft, cohesive feel.

accent

Introduce #6F6E7B sparingly for subtle accents, links, or interactive elements to add a cool, sophisticated touch.

background

Utilize #E8E0D7 for clean, airy backgrounds, ensuring maximum readability for darker text.

text

For body text, #3A3A3A offers excellent readability against lighter backgrounds like #E8E0D7 or #C7B9A3.

Accessibility notes

Ensure sufficient contrast when pairing #A08A74 or #6F6E7B with lighter text colors like #E8E0D7.
Avoid using #C7B9A3 for small text over #E8E0D7 backgrounds; contrast may be insufficient.
The dark #3A3A3A provides excellent contrast for text on #E8E0D7, meeting WCAG AA standards.
Consider using #3A3A3A for all body text to ensure maximum readability across varying background shades.

Recommended combinations

Classic Base

Creates a soft, warm foundation, ideal for main content areas and subtle hierarchy.

#E8E0D7 · #C7B9A3 · #A08A74

Subtle Contrast

Provides clear readability with a touch of cool sophistication for interactive elements.

#E8E0D7 · #3A3A3A · #6F6E7B

Nostalgic Depth

Blends warm and cool tones for a rich, moody aesthetic, suitable for headers or hero sections.

#A08A74 · #6F6E7B · #3A3A3A

CSS variables

:root {
  --vintage-film-grain-1: #A08A74;
  --vintage-film-grain-2: #C7B9A3;
  --vintage-film-grain-3: #6F6E7B;
  --vintage-film-grain-4: #3A3A3A;
  --vintage-film-grain-5: #E8E0D7;
}

Tailwind config

theme: {
  extend: {
    colors: {
      "vintage-film-grain": {
        1: "#A08A74",
        2: "#C7B9A3",
        3: "#6F6E7B",
        4: "#3A3A3A",
        5: "#E8E0D7",
      }
    }
  }
}

Hex values

Color 1#A08A74

Color 2#C7B9A3

Color 3#6F6E7B

Color 4#3A3A3A

Color 5#E8E0D7

Accessibility

Contrast checker

1.7:1Fail

1.5:1Fail

3.5:1AA18

2.5:1Fail

1.7:1Fail

2.6:1Fail

5.9:1AA

1.5:1Fail

2.6:1Fail

2.3:1Fail

3.8:1AA18

3.5:1AA18

5.9:1AA

2.3:1Fail

8.7:1AAA

2.5:1Fail

1.5:1Fail

3.8:1AA18

8.7:1AAA

Similar palettes

More like Vintage Film Grain

Vintage Film Grain

See it in context.

Ready when you are.

Built with Vintage Film Grain.

How to use Vintage Film Grain

Overview

Best used for

Suggested color roles

Accessibility notes

Recommended combinations

Classic Base

Subtle Contrast

Nostalgic Depth

CSS variables

Tailwind config

Related searches

Hex values

Contrast checker

More like Vintage Film Grain