Back to palettes

Palette

Faded Denim Patina

Reflecting the comfortable, lived-in feel of faded denim, with varying shades of soft blues and grays.

coolretro5 colors
More cool palettes

Preview

See it in context.

Interface

New

Ready when you are.

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

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

Data visualization

#2E3A4F#4C5E7F#6A80A8#94AAD1#C4D1ED

Palette guide

How to use Faded Denim Patina

Overview

The 'Faded Denim Patina' palette captures the essence of well-worn denim through a sophisticated range of muted blues and grays. From the profound depth of #2E3A4F to the mid-tone elegance of #4C5E7F and #6A80A8, it gracefully lightens to the soft #94AAD1 and the ethereal #C4D1ED. This collection offers a unique blend of casual comfort and refined subtlety. Designers can leverage its harmonious progression to build interfaces with a vintage yet modern appeal, ensuring a calm and inviting user experience. Developers will appreciate the distinct shades for creating intuitive visual hierarchies in web and mobile applications.

Best used for

  • Retro-modern branding and digital interfaces
  • Lifestyle and fashion e-commerce platforms
  • Editorial design with a sophisticated, vintage touch
  • Mobile apps requiring a calm and focused aesthetic
  • Packaging design for artisanal or handcrafted goods
  • UI/UX designs aiming for a lived-in, comfortable feel

Suggested color roles

primary

Use #2E3A4F for strong foundational elements, headers, or navigation, providing depth and gravitas.

secondary

Apply #4C5E7F for subheadings, prominent content blocks, or secondary buttons, offering substantial visual weight.

accent

Incorporate #6A80A8 for interactive components, links, or subtle graphic elements, adding a gentle focal point.

background

Utilize #C4D1ED as a soft, clean backdrop, ensuring content clarity and a serene user experience.

text

Employ #2E3A4F for main body text on light backgrounds, ensuring optimal readability. For lighter text on darker backgrounds, a crisp white or #C4D1ED.

Accessibility notes

  • Ensure #2E3A4F text on #C4D1ED background meets WCAG AA contrast standards for readability.
  • Avoid using #94AAD1 for small text on #C4D1ED due to insufficient contrast; best for larger elements or backgrounds.
  • Interactive elements using #6A80A8 should have clear hover/focus states beyond just color.
  • #4C5E7F provides good contrast for text on #C4D1ED, offering a slightly softer alternative to the primary.

Recommended combinations

Deep Comfort

Creates a robust yet comforting design, ideal for brand mastheads or impactful hero sections.

#2E3A4F · #4C5E7F · #C4D1ED

Muted Harmony

Perfect for a soft, gradient effect in backgrounds, infographics, or subtle UI components.

#4C5E7F · #6A80A8 · #94AAD1

Subtle Contrast

Balances deep and light tones for clear content hierarchy without starkness, suitable for text-heavy pages.

#2E3A4F · #94AAD1 · #C4D1ED

CSS variables

:root {
  --faded-denim-patina-4-1: #2E3A4F;
  --faded-denim-patina-4-2: #4C5E7F;
  --faded-denim-patina-4-3: #6A80A8;
  --faded-denim-patina-4-4: #94AAD1;
  --faded-denim-patina-4-5: #C4D1ED;
}

Tailwind config

theme: {
  extend: {
    colors: {
      "faded-denim-patina-4": {
        1: "#2E3A4F",
        2: "#4C5E7F",
        3: "#6A80A8",
        4: "#94AAD1",
        5: "#C4D1ED",
      }
    }
  }
}

Related searches

muted blue grey palettevintage fabric colorssoft denim color schemeretro ui design colorscomfortable aesthetic palette

Palette colors

Hex values

Color 1#2E3A4F
·
Color 2#4C5E7F
·
Color 3#6A80A8
·
Color 4#94AAD1
·
Color 5#C4D1ED
·

Accessibility

Contrast checker

1
2
3
4
5
1
1.8:1Fail
2.9:1Fail
4.9:1AA
7.5:1AAA
2
1.8:1Fail
1.6:1Fail
2.8:1Fail
4.3:1AA18
3
2.9:1Fail
1.6:1Fail
1.7:1Fail
2.6:1Fail
4
4.9:1AA
2.8:1Fail
1.7:1Fail
1.5:1Fail
5
7.5:1AAA
4.3:1AA18
2.6:1Fail
1.5:1Fail

Similar palettes

More like Faded Denim Patina

View all cool
Worn Denim Blues
Faded Denim Blues
Faded Denim Days
Faded Denim Patina
Retro Diner Blues
Retro Diner Blues