Palette

Weathered Indigo Denim

Classic blues in varied shades, reflecting the comfortable, worn feel of favorite indigo denim.

coolminimal5 colors

More cool palettes

Preview

See it in context.

Interface

New

Ready when you are.

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

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

Data visualization

#B2C7DE#8BA5BF#6683A3#45648A#2E4A6F

Palette guide

How to use Weathered Indigo Denim

Overview

Evoking the rich, aged character of favorite indigo jeans, the Weathered Indigo Denim palette presents a sophisticated gradient of deep blues. The versatile #45648A serves as a strong primary, beautifully balanced by the mid-tone #6683A3 and the vibrant lighter shade #B2C7DE. For powerful contrast and depth, the darkest hue, #2E4A6F, is indispensable. This palette is ideal for designers crafting brands that need to convey heritage, reliability, and understated elegance, from fashion to tech. Developers can implement these shades to create visually engaging and accessible interfaces, utilizing the strong contrast between light and dark for clear information hierarchy.

Best used for

Fashion and apparel brand identity
Sophisticated digital interfaces and dashboards
Educational platforms and professional training
Corporate reports and presentations
Luxury casual product lines
Historical or documentary film branding

Suggested color roles

primary

Use #45648A as a strong, reliable indigo base for main content or prominent elements.

secondary

Employ #6683A3 for mid-tone accents, subheadings, or secondary navigation to add balance.

accent

Apply #2E4A6F for the deepest, most anchoring elements, such as footers, primary buttons, or bold text.

background

Utilize #B2C7DE as a light, airy base for content areas, ensuring excellent readability.

text

Choose #2E4A6F for primary body text, providing crisp readability and a sophisticated feel. White or off-white text works well on darker blues.

Accessibility notes

Ensure #2E4A6F text on #B2C7DE provides excellent contrast for all users.
Use white or very light text (e.g., #B2C7DE) on darker blues like #45648A, #6683A3, or #2E4A6F.
Avoid using #8BA5BF text on #B2C7DE for small font sizes due to potential low contrast.
Test contrast ratios for all text and interactive elements, especially with mid-tone blues.

Recommended combinations

Deep Indigo

Creates a rich, sophisticated, and strong visual hierarchy, ideal for headlines and key information.

#2E4A6F · #45648A · #6683A3

Faded Indigo

Offers a lighter, softer denim feel, suitable for backgrounds, subtle illustrations, or secondary content.

#B2C7DE · #8BA5BF · #6683A3

Classic Contrast

Provides a strong dark blue base with a light highlight, effective for clear calls-to-action or distinct sections.

#2E4A6F · #B2C7DE · #45648A

CSS variables

:root {
  --weathered-indigo-denim-1: #B2C7DE;
  --weathered-indigo-denim-2: #8BA5BF;
  --weathered-indigo-denim-3: #6683A3;
  --weathered-indigo-denim-4: #45648A;
  --weathered-indigo-denim-5: #2E4A6F;
}

Tailwind config

theme: {
  extend: {
    colors: {
      "weathered-indigo-denim": {
        1: "#B2C7DE",
        2: "#8BA5BF",
        3: "#6683A3",
        4: "#45648A",
        5: "#2E4A6F",
      }
    }
  }
}

Hex values

Color 1#B2C7DE

Color 2#8BA5BF

Color 3#6683A3

Color 4#45648A

Color 5#2E4A6F

Accessibility

Contrast checker

1.5:1Fail

2.3:1Fail

3.5:1AA18

5.2:1AA

1.5:1Fail

2.4:1Fail

3.5:1AA18

2.3:1Fail

1.5:1Fail

1.6:1Fail

2.3:1Fail

3.5:1AA18

2.4:1Fail

1.6:1Fail

1.5:1Fail

5.2:1AA

3.5:1AA18

2.3:1Fail

1.5:1Fail

Similar palettes

More like Weathered Indigo Denim

Weathered Indigo Denim

See it in context.

Ready when you are.

Built with Weathered Indigo Denim.

How to use Weathered Indigo Denim

Overview

Best used for

Suggested color roles

Accessibility notes

Recommended combinations

Deep Indigo

Faded Indigo

Classic Contrast

CSS variables

Tailwind config

Related searches

Hex values

Contrast checker

More like Weathered Indigo Denim