Palette

Faded Denim Patina

Classic blues, worn and softened, reminiscent of well-loved, perfectly faded denim jeans.

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

#1F3F5F#3C6C9C#6A9DD0#A3C9E6#D7ECFB

Palette guide

How to use Faded Denim Patina

Overview

The 'Faded Denim Patina' palette offers a classic, cohesive range of blues, mimicking the comforting evolution of well-loved denim. Starting with the deep, authoritative #1F3F5F, it lightens gracefully through the rich #3C6C9C and the inviting #6A9DD0. The journey continues to the airy #A3C9E6, culminating in the serene, almost white #D7ECFB. This gradient of blues provides designers with excellent tools for creating depth and clear visual hierarchy, while developers can implement a consistent, soothing brand experience. It's perfectly suited for projects requiring a timeless, reliable, and approachable aesthetic.

Best used for

Classic branding and corporate identities
Educational platforms and professional websites
Nautical or maritime-themed designs
Mobile applications emphasizing clarity and calmness
Editorial layouts for history or science content
Any design needing a trusted, authentic blue aesthetic

Suggested color roles

primary

Use #1F3F5F for robust headers, main navigation, or crucial brand elements, conveying authority and depth.

secondary

Apply #3C6C9C for subheadings, prominent buttons, or significant content blocks, offering strong visual support.

accent

Incorporate #6A9DD0 for interactive elements, links, or subtle highlights, providing a gentle yet effective visual cue.

background

Utilize #D7ECFB as a clean, light canvas, ensuring maximum readability and an open, airy feel.

text

Employ #1F3F5F for primary body text on light backgrounds, guaranteeing excellent legibility. A lighter shade like #A3C9E6 for text on darker backgrounds.

Accessibility notes

Ensure #1F3F5F text on #D7ECFB background meets AA or AAA contrast standards.
Avoid using #A3C9E6 for small text on #D7ECFB due to insufficient contrast; reserve for larger elements.
Interactive elements using #6A9DD0 should have clear focus states beyond color changes.
#3C6C9C provides a good alternative for text on #D7ECFB for a slightly softer look than the primary.

Recommended combinations

Classic Contrast

For a high-contrast, professional design perfect for corporate websites or formal presentations.

#1F3F5F · #3C6C9C · #D7ECFB

Soft Gradient

Creates a smooth, harmonious visual flow, ideal for background textures, infographics, or subtle UI elements.

#3C6C9C · #6A9DD0 · #A3C9E6

Deep Sky

Balances deep blue with airy lightness, suitable for hero banners or feature sections.

#1F3F5F · #6A9DD0 · #D7ECFB

CSS variables

:root {
  --faded-denim-patina-3-1: #1F3F5F;
  --faded-denim-patina-3-2: #3C6C9C;
  --faded-denim-patina-3-3: #6A9DD0;
  --faded-denim-patina-3-4: #A3C9E6;
  --faded-denim-patina-3-5: #D7ECFB;
}

Tailwind config

theme: {
  extend: {
    colors: {
      "faded-denim-patina-3": {
        1: "#1F3F5F",
        2: "#3C6C9C",
        3: "#6A9DD0",
        4: "#A3C9E6",
        5: "#D7ECFB",
      }
    }
  }
}

Hex values

Color 1#1F3F5F

Color 2#3C6C9C

Color 3#6A9DD0

Color 4#A3C9E6

Color 5#D7ECFB

Accessibility

Contrast checker

2:1Fail

3.8:1AA18

6.2:1AA

8.9:1AAA

2:1Fail

1.9:1Fail

3.2:1AA18

4.5:1AA

3.8:1AA18

1.9:1Fail

1.6:1Fail

2.4:1Fail

6.2:1AA

3.2:1AA18

1.6:1Fail

1.4:1Fail

8.9:1AAA

4.5:1AA

2.4:1Fail

1.4:1Fail

Similar palettes

More like Faded Denim Patina

Aegean Coastline Muse

Aegean Shoreline Treasures

Alpine Lake Dawn