Back to palettes

Palette

Faded Denim Patina

Soft, worn blues evoking the comfortable and timeless aesthetic of well-loved denim.

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

#4682B4#6A5ACD#87CEFA#B0C4DE#708090

Palette guide

How to use Faded Denim Patina

Overview

This 'Faded Denim Patina' palette blends classic denim blues with a surprising touch of muted violet, creating a sophisticated yet casual feel. The strong steel blue #4682B4 provides a robust foundation, beautifully complemented by the intriguing slate blue-violet #6A5ACD. Lighter shades like the vibrant sky blue #87CEFA and the soft light steel blue #B0C4DE offer airy accents, while the cool gray #708090 grounds the entire scheme. Designers can use this versatile range for a retro-modern aesthetic, offering depth and visual interest across digital interfaces or print. Developers will find distinct colors for various UI states, ensuring clear user experience.

Best used for

  • Retro-themed websites and branding
  • Casual apparel and accessory e-commerce
  • Mobile apps with a unique, vintage twist
  • Editorial design for lifestyle or craft magazines
  • Branding for artisan goods or specialty coffee shops
  • UI/UX that requires a blend of traditional and modern

Suggested color roles

primary

Use #4682B4 for strong headings, navigation, or main brand elements, offering stability.

secondary

Apply #6A5ACD for subheadings, secondary buttons, or distinct sections, adding a unique, sophisticated flair.

accent

Incorporate #87CEFA for calls-to-action, interactive elements, or highlights, providing a bright, engaging pop.

background

Utilize #B0C4DE as a soft, neutral base for content, allowing other colors to stand out gently.

text

Employ #4682B4 for body text on light backgrounds like #B0C4DE, ensuring excellent readability. For dark backgrounds, a crisp white.

Accessibility notes

  • #4682B4 text on #B0C4DE background offers good contrast for body text.
  • #87CEFA might have insufficient contrast for small text on #B0C4DE; use for larger elements or accents.
  • Ensure interactive elements using #6A5ACD or #87CEFA have additional visual indicators.
  • #708090 provides a good alternative for darker text on very light backgrounds or vice-versa.

Recommended combinations

Denim & Violet

For a distinct brand identity blending classic blue with a sophisticated violet undertone.

#4682B4 · #6A5ACD · #B0C4DE

Sky & Steel

Creates a dynamic yet grounded feel, excellent for hero sections or data visualization.

#4682B4 · #87CEFA · #708090

Muted Retro

Perfect for a soft, vintage aesthetic in UI backgrounds or print collateral.

#6A5ACD · #708090 · #B0C4DE

CSS variables

:root {
  --faded-denim-patina-2-1: #4682B4;
  --faded-denim-patina-2-2: #6A5ACD;
  --faded-denim-patina-2-3: #87CEFA;
  --faded-denim-patina-2-4: #B0C4DE;
  --faded-denim-patina-2-5: #708090;
}

Tailwind config

theme: {
  extend: {
    colors: {
      "faded-denim-patina-2": {
        1: "#4682B4",
        2: "#6A5ACD",
        3: "#87CEFA",
        4: "#B0C4DE",
        5: "#708090",
      }
    }
  }
}

Related searches

vintage blue violet palettefaded denim color schemesretro casual color palettesteel blue and grey designsophisticated denim colors

Palette colors

Hex values

Color 1#4682B4
·
Color 2#6A5ACD
·
Color 3#87CEFA
·
Color 4#B0C4DE
·
Color 5#708090
·

Accessibility

Contrast checker

1
2
3
4
5
1
1.3:1Fail
2.4:1Fail
2.3:1Fail
1:1Fail
2
1.3:1Fail
3.1:1AA18
3:1Fail
1.3:1Fail
3
2.4:1Fail
3.1:1AA18
1:1Fail
2.4:1Fail
4
2.3:1Fail
3:1Fail
1:1Fail
2.3:1Fail
5
1:1Fail
1.3:1Fail
2.4:1Fail
2.3:1Fail

Similar palettes

More like Faded Denim Patina

View all cool