Palette

Faded Denim Days

Comfortable, soft blues like a well-loved pair of faded denim jeans on a relaxed day.

coolretro5 colors

More cool palettes

Preview

See it in context.

Interface

New

Ready when you are.

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

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

Data visualization

#D7E5F0#A7C4DE#7A9EBF#4F769C#2D4C69

Palette guide

How to use Faded Denim Days

Overview

The Faded Denim Days palette evokes a sense of relaxed nostalgia, offering a beautiful gradient of blues from the airy #D7E5F0 to the deep, grounding #2D4C69. This collection perfectly captures the essence of a well-loved pair of faded denim jeans on a comfortable, retro-inspired day. Designers can leverage this spectrum to create depth and visual interest in their projects, from vintage branding to modern interfaces with a classic twist. Developers will find these hues highly adaptable for defining sections, creating subtle shadows, and building a cohesive, soothing user experience that feels both familiar and refined.

Best used for

Retro-inspired branding and marketing materials
Vintage photography and art display websites
Casual gaming UI and nostalgic app themes
Historical content and documentary design
Relaxed social media templates and graphics
Fashion lines emphasizing comfort and timelessness

Suggested color roles

primary

Utilize #4F769C for core brand elements, main headings, or prominent calls to action, balancing depth and visibility.

secondary

Apply #7A9EBF for supporting information, subheadings, or secondary interactive elements, offering a harmonious mid-tone.

accent

Employ #A7C4DE as a soft accent for highlights, hover states, or subtle graphical elements, adding a gentle touch.

background

Use #D7E5F0 for expansive backgrounds, providing a very light, airy canvas that allows other colors to shine.

text

For dark, readable text, #2D4C69 provides excellent contrast and depth, especially on lighter shades like #D7E5F0.

Accessibility notes

Ensure #2D4C69 text on #D7E5F0 background meets WCAG AA or AAA contrast standards for optimal readability.
Be cautious when placing text on #A7C4DE or #A7C4DE; prefer darker text like #4F769C or #2D4C69.
Use the darkest blues, #4F769C and #2D4C69, to define interactive elements clearly.
When designing gradients or overlays, ensure text remains legible against the changing color values.

Recommended combinations

Deep Retro

Creates a strong, vintage feel, ideal for headers, primary content blocks, and impactful graphics.

#2D4C69 · #4F769C · #7A9EBF

Faded Comfort

Excellent for soft backgrounds, layered UI elements, or subtle illustrations, providing a gentle, airy look.

#7A9EBF · #A7C4DE · #D7E5F0

Modern Casual

Combines a mid-tone with light accents and a bright background for a clean, contemporary feel with retro undertones.

#4F769C · #A7C4DE · #D7E5F0

CSS variables

:root {
  --faded-denim-days-1: #D7E5F0;
  --faded-denim-days-2: #A7C4DE;
  --faded-denim-days-3: #7A9EBF;
  --faded-denim-days-4: #4F769C;
  --faded-denim-days-5: #2D4C69;
}

Tailwind config

theme: {
  extend: {
    colors: {
      "faded-denim-days": {
        1: "#D7E5F0",
        2: "#A7C4DE",
        3: "#7A9EBF",
        4: "#4F769C",
        5: "#2D4C69",
      }
    }
  }
}

Hex values

Color 1#D7E5F0

Color 2#A7C4DE

Color 3#7A9EBF

Color 4#4F769C

Color 5#2D4C69

Accessibility

Contrast checker

1.4:1Fail

2.2:1Fail

3.7:1AA18

7:1AA

1.4:1Fail

1.6:1Fail

2.6:1Fail

4.9:1AA