Palette

Worn Denim Blues

The comfortable, faded blues of well-loved denim, soft and inviting, with a timeless appeal.

coolcalm5 colors

More cool palettes

Preview

See it in context.

Interface

New

Ready when you are.

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

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

Data visualization

#2B4E6B#4C7799#7DA3C0#AECBE0#DCE9F2

Palette guide

How to use Worn Denim Blues

Overview

The Worn Denim Blues palette embodies the comforting, faded aesthetic of classic denim, offering a range of cool, approachable blue tones. From the deep, grounding #2B4E6B to the airy, soft #DCE9F2, this collection is ideal for designs aiming for a casual yet sophisticated feel. The mid-tones like #4C7799 and #7DA3C0 provide excellent versatility for layering, while #AECBE0 acts as a gentle highlight. Designers will find this palette perfect for creating user interfaces that feel familiar and inviting, ensuring a relaxed user experience. Developers can easily integrate these hex codes to maintain brand consistency across various digital platforms, enhancing the overall visual appeal.

Best used for

Casual apparel brand websites
Lifestyle blogs and magazines
Mobile app interfaces for productivity
Community forums or social platforms
Interior design inspiration sites
Children's product branding

Suggested color roles

primary

Use #2B4E6B for strong headers or foundational UI elements, providing a deep, stable anchor.

secondary

A versatile mid-tone like #4C7799 is excellent for subheadings, navigation, or detailed content sections.

accent

Apply #7DA3C0 as a soft accent for buttons, links, or interactive elements that need a gentle pop.

background

The light and airy #DCE9F2 serves as an ideal background, promoting readability and a fresh feel.

text

For body text on light backgrounds, #2B4E6B offers excellent contrast and readability.

Accessibility notes

Ensure sufficient contrast when using lighter blues like #AECBE0 for text on #DCE9F2 backgrounds.
Pair #2B4E6B with #DCE9F2 for high-contrast text and background combinations.
Test interactive elements like buttons using #7DA3C0 to ensure they are discernible.
Avoid using #AECBE0 for small text unless on a very dark contrasting background.

Recommended combinations

Classic Denim

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

#DCE9F2 · #AECBE0 · #2B4E6B

Soft Layers

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

#AECBE0 · #7DA3C0 · #4C7799

Accent Contrast

Light background with strong primary text and a gentle accent for calls to action or key information.

#DCE9F2 · #2B4E6B · #7DA3C0

CSS variables

:root {
  --worn-denim-blues-2-1: #2B4E6B;
  --worn-denim-blues-2-2: #4C7799;
  --worn-denim-blues-2-3: #7DA3C0;
  --worn-denim-blues-2-4: #AECBE0;
  --worn-denim-blues-2-5: #DCE9F2;
}

Tailwind config

theme: {
  extend: {
    colors: {
      "worn-denim-blues-2": {
        1: "#2B4E6B",
        2: "#4C7799",
        3: "#7DA3C0",
        4: "#AECBE0",
        5: "#DCE9F2",
      }
    }
  }
}

Hex values

Color 1#2B4E6B

Color 2#4C7799

Color 3#7DA3C0

Color 4#AECBE0

Color 5#DCE9F2

Accessibility

Contrast checker

1.8:1Fail

3.3:1AA18

5.2:1AA

7.1:1AAA

1.8:1Fail

2.8:1Fail

3.9:1AA18

3.3:1AA18

1.8:1Fail

1.6:1Fail

2.2:1Fail

5.2:1AA

2.8:1Fail

1.6:1Fail

1.4:1Fail

7.1:1AAA

3.9:1AA18

2.2:1Fail

1.4:1Fail

Similar palettes

More like Worn Denim Blues

Worn Denim Blues

See it in context.

Ready when you are.

Built with Worn Denim Blues.

How to use Worn Denim Blues

Overview

Best used for

Suggested color roles

Accessibility notes

Recommended combinations

Classic Denim

Soft Layers

Accent Contrast

CSS variables

Tailwind config

Related searches

Hex values

Contrast checker

More like Worn Denim Blues