Palette

Faded Photograph

Soft, muted tones that mimic the faded, wistful charm of an old, beloved photograph.

neutralretro5 colors

More neutral palettes

Preview

See it in context.

Interface

New

Ready when you are.

A quick look at how Faded Photograph 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 Faded Photograph.

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

Data visualization

#B0C4DE#87CEFA#778899#A9A9A9#D3D3D3

Palette guide

How to use Faded Photograph

Overview

The "Faded Photograph" palette offers a serene collection of soft, muted blue and gray tones, perfectly mimicking the wistful charm of an old, beloved photograph. Featuring light blue #B0C4DE (Light Steel Blue) and #87CEFA (Light Sky Blue), alongside versatile grays #778899 (Light Slate Gray), #A9A9A9 (Dark Gray), and #D3D3D3 (Light Gray), this palette is ideal for evoking a sense of calm, nostalgia, and understated elegance. Designers and developers can utilize these hues to create sophisticated, gentle interfaces and branding that feel both modern and timeless, with a subtle retro twist.

Best used for

Minimalist web design and mobile applications
Branding for art galleries or photography studios
Interior design focusing on tranquility and light
E-commerce sites for artisan crafts or slow fashion
Print materials for elegant reports or portfolios
UI/UX for meditation or mindfulness apps

Suggested color roles

primary

Use #D3D3D3 as a clean, airy background, providing a light and spacious canvas for content.

secondary

Apply #B0C4DE for secondary content blocks, card backgrounds, or subtle navigation elements, adding a hint of soft blue.

accent

Utilize #87CEFA for calls-to-action, active states, or key graphical elements to introduce a gentle, yet clear, focal point.

background

Employ #A9A9A9 for footer areas or deeper content sections, offering a grounding mid-tone gray.

text

For body text, #778899 provides excellent readability against lighter backgrounds like #D3D3D3 or #B0C4DE. Consider a dark charcoal for stronger contrast.

Accessibility notes

Ensure sufficient contrast between #778899 text and #D3D3D3 background to meet WCAG AA standards.
Lighter blues like #B0C4DE and #87CEFA will require dark text for optimal contrast, especially for smaller font sizes.
When pairing #A9A9A9 with #778899, ensure adequate contrast for UI elements or informational text, as they are close in value.
Avoid using #D3D3D3 directly on #B0C4DE for critical information, as their similarity in lightness can reduce readability.

Recommended combinations

Soft Haze

Ideal for creating serene backgrounds and layered UI elements, evoking a calm and slightly faded atmosphere.

#D3D3D3 · #B0C4DE · #A9A9A9

Muted Sky

Great for header sections or graphical elements, offering a gentle progression of blues with a grounding gray.

#B0C4DE · #87CEFA · #778899

Cool Nostalgia

Perfect for text-heavy content or elegant branding, providing a sophisticated monochromatic gray scale with soft transitions.

#D3D3D3 · #A9A9A9 · #778899

CSS variables

:root {
  --faded-photograph-1: #B0C4DE;
  --faded-photograph-2: #87CEFA;
  --faded-photograph-3: #778899;
  --faded-photograph-4: #A9A9A9;
  --faded-photograph-5: #D3D3D3;
}

Tailwind config

theme: {
  extend: {
    colors: {
      "faded-photograph": {
        1: "#B0C4DE",
        2: "#87CEFA",
        3: "#778899",
        4: "#A9A9A9",
        5: "#D3D3D3",
      }
    }
  }
}

Hex values

Color 1#B0C4DE

Color 2#87CEFA

Color 3#778899

Color 4#A9A9A9

Color 5#D3D3D3

Accessibility

Contrast checker

1:1Fail

2:1Fail

1.3:1Fail

1.2:1Fail

1:1Fail

2.1:1Fail

1.4:1Fail

1.1:1Fail

2:1Fail

2.1:1Fail

1.5:1Fail

2.4:1Fail

1.3:1Fail

1.4:1Fail

1.5:1Fail

1.6:1Fail

1.2:1Fail

1.1:1Fail

2.4:1Fail

1.6:1Fail

Similar palettes

More like Faded Photograph

View all neutral

Sepia Memory

Aged Herbarium Scroll

Aged Indigo Fabric

Aged Photo Album

Aged Photoprint Tone

Dark Academia Journal