Back to palettes

Palette

Worn Denim Faded

Cool blues and soft greys emulate the comforting, broken-in feel of well-loved and faded denim.

neutralminimal5 colors
More neutral 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

#3A506B#647D9B#99AFC7#C9D9E9#EDF3F9

Palette guide

How to use Worn Denim Faded

Overview

The Worn Denim Faded palette provides a sophisticated blend of cool blues and soft greys, perfectly emulating the comforting, broken-in feel of well-loved denim. Ranging from the deep #3A506B to the almost-white #EDF3F9, and featuring versatile mid-tones like #647D9B, #99AFC7, and #C9D9E9, this collection is inherently calming and versatile. Designers can leverage these hex codes to create minimalist, clean, yet inviting interfaces that convey authenticity and understated elegance. It's particularly effective for designs that require a subtle, mature aesthetic. Developers will find this palette's clear progression of shades excellent for creating depth and hierarchy in web and mobile applications.

Best used for

  • Minimalist fashion brand websites
  • Architectural firm portfolios
  • Luxury home goods e-commerce
  • Professional services websites
  • Digital art galleries
  • Meditation and wellness apps

Suggested color roles

primary

Use #3A506B for strong headings, navigation, or foundational UI elements, providing depth and professionalism.

secondary

The versatile #647D9B is excellent for subheadings, secondary content, or subtle graphic accents.

accent

Apply #99AFC7 as a soft accent for buttons, links, or interactive elements that need to stand out gently.

background

The light and clean #EDF3F9 serves as an ideal background, ensuring high readability and a fresh feel.

text

For primary body text on light backgrounds, #3A506B offers superb contrast and legibility.

Accessibility notes

  • Ensure #3A506B text on #EDF3F9 background meets WCAG AA contrast standards.
  • Avoid pairing #C9D9E9 with #EDF3F9 for text as contrast will be insufficient.
  • Test interactive elements using #99AFC7 to ensure they are clearly discernible against their background.
  • For critical information, use the darkest color #3A506B against the lightest #EDF3F9.

Recommended combinations

Clean & Deep

A high-contrast combination perfect for main content areas with light backgrounds and strong, dark text.

#EDF3F9 · #C9D9E9 · #3A506B

Soft Layers

Ideal for creating subtle depth in sections like cards or feature blocks, using gradual tonal shifts.

#647D9B · #99AFC7 · #C9D9E9

Accent & Base

Light background with primary text and a clear, yet gentle, accent for calls to action.

#EDF3F9 · #3A506B · #99AFC7

CSS variables

:root {
  --worn-denim-faded-2-1: #3A506B;
  --worn-denim-faded-2-2: #647D9B;
  --worn-denim-faded-2-3: #99AFC7;
  --worn-denim-faded-2-4: #C9D9E9;
  --worn-denim-faded-2-5: #EDF3F9;
}

Tailwind config

theme: {
  extend: {
    colors: {
      "worn-denim-faded-2": {
        1: "#3A506B",
        2: "#647D9B",
        3: "#99AFC7",
        4: "#C9D9E9",
        5: "#EDF3F9",
      }
    }
  }
}

Related searches

faded denim color schemeneutral blue paletteminimalist UI design colorsunderstated elegant palettecool grey blue branding

Palette colors

Hex values

Color 1#3A506B
·
Color 2#647D9B
·
Color 3#99AFC7
·
Color 4#C9D9E9
·
Color 5#EDF3F9
·

Accessibility

Contrast checker

1
2
3
4
5
1
1.9:1Fail
3.7:1AA18
5.7:1AA
7.4:1AAA
2
1.9:1Fail
1.9:1Fail
2.9:1Fail
3.8:1AA18
3
3.7:1AA18
1.9:1Fail
1.6:1Fail
2:1Fail
4
5.7:1AA
2.9:1Fail
1.6:1Fail
1.3:1Fail
5
7.4:1AAA
3.8:1AA18
2:1Fail
1.3:1Fail

Similar palettes

More like Worn Denim Faded

View all neutral
Faded Denim Comfort
Weathered Denim Fade
Arctic Fox Whisper
Ceramic Glaze Stillness
Cloud Linen Texture
Cool Linen Breeze