Palette

Worn Denim Faded

Comforting, slightly faded blues evoking the well-loved texture of vintage denim.

coolretro5 colors

More cool palettes

Preview

See it in context.

Interface

New

Ready when you are.

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

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

Data visualization

#7C8D9E#5D738A#405972#29455B#1C334A

Palette guide

How to use Worn Denim Faded

Overview

The Worn Denim Faded palette provides a comforting collection of slightly faded blues, evoking the well-loved texture of vintage denim. With a spectrum ranging from the deep #1C334A to the softer #7C8D9E, and including versatile mid-tones like #29455B, #405972, and #5D738A, this palette is rich in character. Designers can leverage these hex codes to create interfaces that feel authentic, established, and effortlessly cool. It's particularly effective for projects aiming for a retro or artisanal aesthetic without being overtly vibrant. Developers will find this palette excellent for building cohesive visual themes that convey a sense of history and quality across digital platforms.

Best used for

Vintage clothing e-commerce
Craft brewery branding
Antique furniture marketplaces
Retro gaming platforms
Photography portfolios with a moody aesthetic
Music blogs focusing on classic genres

Suggested color roles

primary

Use #1C334A for strong headings, navigation, or dominant branding elements, conveying depth and authority.

secondary

The robust #29455B is excellent for subheadings, secondary content, or background sections requiring solidity.

accent

Apply #5D738A as a subtle accent for interactive elements or visual highlights that need to blend harmoniously.

background

The mid-tone #7C8D9E can serve as a soft, comforting background for content, or use a very light off-white.

text

On darker backgrounds, a light off-white or very light grey will provide excellent contrast for readability.

Accessibility notes

Ensure sufficient contrast for text, especially when using lighter colors like #7C8D9E on darker blues.
Consider using a stark white or light gray for all body text to ensure readability across the palette's darker range.
Avoid pairing #5D738A with #405972 for text, as contrast might be insufficient.
Interactive elements should have clear hover/focus states, as color differences can be subtle.

Recommended combinations

Deep & Clear

Ideal for main content areas, providing a lighter background with strong, readable text and deep accents.

#7C8D9E · #5D738A · #1C334A

Retro Gradients

Perfect for creating depth in backgrounds or large sections, with smooth, understated tonal transitions.

#29455B · #405972 · #5D738A

Vintage Focus

A softer background with strong primary text and a versatile mid-tone for secondary information.

#7C8D9E · #1C334A · #405972

CSS variables

:root {
  --worn-denim-faded-1: #7C8D9E;
  --worn-denim-faded-2: #5D738A;
  --worn-denim-faded-3: #405972;
  --worn-denim-faded-4: #29455B;
  --worn-denim-faded-5: #1C334A;
}

Tailwind config

theme: {
  extend: {
    colors: {
      "worn-denim-faded": {
        1: "#7C8D9E",
        2: "#5D738A",
        3: "#405972",
        4: "#29455B",
        5: "#1C334A",
      }
    }
  }
}

Hex values

Color 1#7C8D9E

Color 2#5D738A

Color 3#405972

Color 4#29455B

Color 5#1C334A

Accessibility

Contrast checker

1.4:1Fail

2.1:1Fail

2.9:1Fail

3.8:1AA18

1.4:1Fail

1.5:1Fail

2:1Fail

2.6:1Fail

2.1:1Fail

1.5:1Fail

1.4:1Fail

1.8:1Fail

2.9:1Fail

2:1Fail

1.4:1Fail

1.3:1Fail

3.8:1AA18

2.6:1Fail

1.8:1Fail

1.3:1Fail

Similar palettes

More like Worn Denim Faded

Worn Denim Faded

See it in context.

Ready when you are.

Built with Worn Denim Faded.

How to use Worn Denim Faded

Overview

Best used for

Suggested color roles

Accessibility notes

Recommended combinations

Deep & Clear

Retro Gradients

Vintage Focus

CSS variables

Tailwind config

Related searches

Hex values

Contrast checker

More like Worn Denim Faded