Palette

Worn Denim Blues

Classic, soft blues and washed-out indigos evoke the comfortable, timeless feel of a favorite pair of jeans.

coolminimal5 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

#4D6D8B#7A9BC0#B2D2E6#DFEFF6#2E4B6A

Palette guide

How to use Worn Denim Blues

Overview

The Worn Denim Blues palette offers a beautifully balanced range of classic, soft blues and washed-out indigos, perfectly capturing the comfortable feel of a favorite pair of jeans. With tones spanning from the deep #2E4B6A to the airy #DFEFF6, and versatile mid-tones like #4D6D8B, #7A9BC0, and #B2D2E6, this collection is incredibly adaptable. Designers can leverage this palette to create interfaces that feel inviting, relaxed, and timeless, suitable for brands that prioritize comfort and authenticity. The gentle progression of shades allows for sophisticated layering and visual depth, ensuring a harmonious aesthetic. Developers will find these hex codes straightforward for consistent implementation across web and mobile platforms.

Best used for

Comfort-focused lifestyle brands
Casual fashion e-commerce
Wellness and mindfulness apps
Children's clothing websites
Travel and adventure blogs
Home goods and decor online stores

Suggested color roles

primary

Use #2E4B6A for strong headers, navigation, or foundational elements, providing depth and stability.

secondary

The versatile #4D6D8B is excellent for subheadings, secondary content, or subtle graphic elements.

accent

Apply #7A9BC0 as a gentle accent for buttons, interactive elements, or to highlight key information.

background

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

text

For primary body text on light backgrounds, #2E4B6A offers excellent contrast and legibility.

Accessibility notes

Ensure #2E4B6A text on #DFEFF6 background meets WCAG AA contrast standards.
Avoid pairing #B2D2E6 with #DFEFF6 for text as contrast will be insufficient.
Test interactive elements using #7A9BC0 to ensure they are clearly discernible against their background.
For critical information, use the darkest color #2E4B6A against the lightest #DFEFF6.

Recommended combinations

Fresh & Clean

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

#DFEFF6 · #B2D2E6 · #2E4B6A

Soft Gradient

Ideal for creating subtle depth in sections like banners or feature blocks, using a smooth transition.

#4D6D8B · #7A9BC0 · #B2D2E6

Accent Focus

Light background with dark primary text and a clear, inviting accent for calls to action.

#DFEFF6 · #2E4B6A · #7A9BC0

CSS variables

:root {
  --worn-denim-blues-1: #4D6D8B;
  --worn-denim-blues-2: #7A9BC0;
  --worn-denim-blues-3: #B2D2E6;
  --worn-denim-blues-4: #DFEFF6;
  --worn-denim-blues-5: #2E4B6A;
}

Tailwind config

theme: {
  extend: {
    colors: {
      "worn-denim-blues": {
        1: "#4D6D8B",
        2: "#7A9BC0",
        3: "#B2D2E6",
        4: "#DFEFF6",
        5: "#2E4B6A",
      }
    }
  }
}

Hex values

Color 1#4D6D8B

Color 2#7A9BC0

Color 3#B2D2E6

Color 4#DFEFF6

Color 5#2E4B6A

Accessibility

Contrast checker

1.9:1Fail

3.4:1AA18

4.6:1AA

1.7:1Fail

1.9:1Fail

1.8:1Fail

2.4:1Fail

3.1:1AA18

3.4:1AA18

1.8:1Fail

1.3:1Fail

5.7:1AA

4.6:1AA

2.4:1Fail

1.3:1Fail

7.6:1AAA

1.7:1Fail

3.1:1AA18

5.7:1AA

7.6:1AAA

Similar palettes

More like Worn Denim Blues

View all cool

Faded Denim Comfort

Weathered Indigo Denim

Glacier Mist Horizon

Nordic Winter Calm

Porcelain Teacup Blue

Vintage Blueprint Hues