Back to palettes

Palette

Weathered Denim Fade

Comfortable and timeless, like a favorite pair of well-worn, faded denim jeans.

neutralminimal5 colors
More neutral palettes

Preview

See it in context.

Interface

New

Ready when you are.

A quick look at how Weathered Denim Fade 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 Weathered Denim Fade.

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

Data visualization

#4682B4#7B8EA5#A8B7C7#D3DDE8#3A5E8C

Palette guide

How to use Weathered Denim Fade

Overview

The Weathered Denim Fade palette captures the comforting, timeless essence of well-worn jeans, offering a range of classic blues with a softened, casual appeal. Its core is a versatile blue, #4682B4, perfectly complemented by the lighter, more faded #7B8EA5. A deeper, anchoring hue like #3A5E8C provides strong contrast and definition, while #D3DDE8 acts as a crisp, airy background. Designers will find this palette excellent for projects requiring a relaxed yet sophisticated feel, from casual branding to modern digital interfaces. Developers can utilize these shades for building accessible, user-friendly experiences that convey reliability and approachability.

Best used for

  • Casual apparel and fashion brands
  • Lifestyle blogs and online magazines
  • Tech interfaces and mobile applications
  • Educational materials and platforms
  • Family-friendly product packaging
  • Relaxed corporate or startup branding

Suggested color roles

primary

Use #4682B4 as a classic, approachable blue for main elements and calls-to-action.

secondary

Employ #7B8EA5 for softer accents, secondary navigation, or backgrounds for a faded effect.

accent

Apply #3A5E8C for deep, grounding contrast in important text, icons, or graphical elements.

background

Utilize #D3DDE8 as a light, clean backdrop, ideal for content areas to ensure excellent readability.

text

Choose #3A5E8C for primary body text, offering strong contrast and a sophisticated denim feel.

Accessibility notes

  • Ensure #3A5E8C text on #D3DDE8 or #A8B7C7 has excellent contrast for all users.
  • Use white or #D3DDE8 for text on darker blues like #3A5E8C or #4682B4 to ensure readability.
  • Avoid using #A8B7C7 text on #D3DDE8 for small font sizes due to potential low contrast.
  • Consider larger font sizes for text elements using #7B8EA5 on light backgrounds.

Recommended combinations

Classic Denim

Creates an authentic, layered denim feel, perfect for branding and main content blocks.

#3A5E8C · #4682B4 · #7B8EA5

Faded Comfort

Offers a light, airy, and relaxed aesthetic, ideal for backgrounds and subtle UI elements.

#D3DDE8 · #A8B7C7 · #4682B4

Deep Blue Contrast

Provides a strong base with lighter complements, suitable for headlines and supporting text.

#3A5E8C · #7B8EA5 · #D3DDE8

CSS variables

:root {
  --weathered-denim-fade-1: #4682B4;
  --weathered-denim-fade-2: #7B8EA5;
  --weathered-denim-fade-3: #A8B7C7;
  --weathered-denim-fade-4: #D3DDE8;
  --weathered-denim-fade-5: #3A5E8C;
}

Tailwind config

theme: {
  extend: {
    colors: {
      "weathered-denim-fade": {
        1: "#4682B4",
        2: "#7B8EA5",
        3: "#A8B7C7",
        4: "#D3DDE8",
        5: "#3A5E8C",
      }
    }
  }
}

Related searches

faded denim color schemecasual blue paletteclassic navy tonesrelaxed ui colorsvintage blue design

Palette colors

Hex values

Color 1#4682B4
·
Color 2#7B8EA5
·
Color 3#A8B7C7
·
Color 4#D3DDE8
·
Color 5#3A5E8C
·

Accessibility

Contrast checker

1
2
3
4
5
1
1.2:1Fail
2:1Fail
3:1Fail
1.6:1Fail
2
1.2:1Fail
1.6:1Fail
2.4:1Fail
2:1Fail
3
2:1Fail
1.6:1Fail
1.5:1Fail
3.2:1AA18
4
3:1Fail
2.4:1Fail
1.5:1Fail
4.8:1AA
5
1.6:1Fail
2:1Fail
3.2:1AA18
4.8:1AA

Similar palettes

More like Weathered Denim Fade

View all neutral
Faded Denim Comfort
Worn Denim Faded
Aged Library Bound
Ancient Roman Stone
Arctic Fox Whisper
Ceramic Glaze Stillness