Palette

Faded Denim

Soft, muted blues and grays, like the comforting, familiar tones of well-loved denim jeans.

neutralcalm5 colors

More neutral palettes

Preview

See it in context.

Interface

New

Ready when you are.

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

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

Data visualization

#4682B4#6A5ACD#778899#B0C4DE#DCDCDC

Palette guide

How to use Faded Denim

Overview

The 'Faded Denim' palette is a sophisticated blend of classic blues and versatile grays, embodying the comforting aesthetic of well-loved denim. It features the robust steel blue #4682B4, a unique slate blue-violet #6A5ACD, and the balanced slate gray #778899. Lighter tones include the soft light steel blue #B0C4DE and the very light gainsboro #DCDCDC, which acts as a near-white. This palette offers designers a rich foundation for creating designs that are both timeless and modern, with a casual yet refined feel. Developers will find these distinct colors useful for clearly defining UI states and elements, enhancing user experience.

Best used for

Casual yet sophisticated branding
Responsive web design for lifestyle brands
Mobile apps with a comfortable, familiar interface
Editorial design for fashion or home decor
Packaging for artisan products or vintage-inspired goods
UI/UX that blends softness with clear functionality

Suggested color roles

primary

Use #4682B4 for significant headings, navigation, or primary calls-to-action, providing a strong and reliable base.

secondary

Apply #6A5ACD for subheadings, secondary buttons, or distinct sections, adding a unique and stylish touch.

accent

Incorporate #778899 for subtle highlights, borders, or informational text, offering a neutral yet grounding element.

background

Utilize #DCDCDC as a clean, very light background, ensuring excellent readability and a soft, inviting feel.

text

Employ #4682B4 for main body text on light backgrounds like #DCDCDC, ensuring optimal legibility. Use a dark charcoal for general text if #4682B4 is too blue for the context.

Accessibility notes

#4682B4 text on #DCDCDC background offers good contrast, meeting WCAG AA standards.
#B0C4DE might have insufficient contrast for small text on #DCDCDC; use for larger elements or backgrounds.
Ensure interactive elements using #6A5ACD have clear visual indicators beyond color changes.
#778899 can be a versatile text color for a softer look on light backgrounds or as a subtle border.

Recommended combinations

Classic Denim

Creates a timeless, reliable aesthetic, excellent for corporate or informational websites.

#4682B4 · #778899 · #DCDCDC

Modern Blend

Offers a fresh, subtle look, ideal for creative portfolios or lifestyle blogs.

#6A5ACD · #B0C4DE · #DCDCDC

Sophisticated Gray

Provides a rich, deep combination for backgrounds or elements requiring a more subdued elegance and depth.

#4682B4 · #6A5ACD · #778899

CSS variables

:root {
  --faded-denim-1: #4682B4;
  --faded-denim-2: #6A5ACD;
  --faded-denim-3: #778899;
  --faded-denim-4: #B0C4DE;
  --faded-denim-5: #DCDCDC;
}

Tailwind config

theme: {
  extend: {
    colors: {
      "faded-denim": {
        1: "#4682B4",
        2: "#6A5ACD",
        3: "#778899",
        4: "#B0C4DE",
        5: "#DCDCDC",
      }
    }
  }
}

Hex values

Color 1#4682B4

Color 2#6A5ACD

Color 3#778899

Color 4#B0C4DE

Color 5#DCDCDC

Accessibility

Contrast checker

1.3:1Fail

1.1:1Fail

2.3:1Fail

3:1Fail

1.3:1Fail

1.5:1Fail

3:1Fail

3.9:1AA18

1.1:1Fail

1.5:1Fail

2:1Fail

2.7:1Fail

2.3:1Fail

3:1Fail

2:1Fail

1.3:1Fail

3:1Fail

3.9:1AA18

2.7:1Fail

1.3:1Fail

Similar palettes

More like Faded Denim

Faded Denim

See it in context.

Ready when you are.

Built with Faded Denim.

How to use Faded Denim

Overview

Best used for

Suggested color roles

Accessibility notes

Recommended combinations

Classic Denim

Modern Blend

Sophisticated Gray

CSS variables

Tailwind config

Related searches

Hex values

Contrast checker

More like Faded Denim