Palette

Worn Denim Blues

A comfortable and familiar palette reflecting the timeless, faded blues of your favorite pair of jeans.

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

#00203F#2B4C72#628FB6#A4CCE5#DCE9F2

Palette guide

How to use Worn Denim Blues

Overview

The Worn Denim Blues palette captures the familiar comfort of well-loved jeans, offering a sophisticated spectrum of cool blues. Ranging from the deep, almost black #00203F to the soft, airy #DCE9F2, this palette provides versatility for various design applications. Intermediate shades like #2B4C72, #628FB6, and #A4CCE5 offer excellent layering potential, creating depth and visual interest. Designers can leverage these hex codes to evoke a sense of timelessness and approachability, making it suitable for brands that value authenticity and comfort. Developers will appreciate the clear differentiation between colors, facilitating straightforward implementation for a cohesive and engaging user experience across digital platforms.

Best used for

Fashion and apparel e-commerce
Lifestyle and travel blogs
Educational platforms with a calm interface
Home decor brand websites
Mobile app designs for casual use
Photography portfolios

Suggested color roles

primary

Employ #00203F for strong, impactful headings, navigation, or dominant branding elements.

secondary

Use #2B4C72 for subheadings, secondary content blocks, or to add a subtle layer of depth.

accent

A vibrant yet soft accent, #628FB6 is perfect for interactive elements like buttons or links.

background

The light and clean #DCE9F2 serves as an excellent background, ensuring high readability and a fresh feel.

text

For primary body text on light backgrounds, #00203F offers superb contrast and legibility.

Accessibility notes

Ensure #00203F text on #DCE9F2 background meets WCAG AA contrast standards.
Avoid placing #A4CCE5 text directly on #DCE9F2 as contrast will be insufficient.
Use #628FB6 for interactive elements only if contrast with its background is adequate.
For small text, always opt for the darkest colors like #00203F against the lightest background.

Recommended combinations

Deep Contrast

Ideal for main content areas, providing clear hierarchy with a light background and strong, dark text.

#DCE9F2 · #A4CCE5 · #00203F

Layered Blues

Creates visual depth in sections like feature cards or informational blocks with gradual tonal shifts.

#2B4C72 · #628FB6 · #A4CCE5

Subtle Accent

A clean background with primary text and a clear, yet gentle, accent for calls to action.

#DCE9F2 · #00203F · #628FB6

CSS variables

:root {
  --worn-denim-blues-3-1: #00203F;
  --worn-denim-blues-3-2: #2B4C72;
  --worn-denim-blues-3-3: #628FB6;
  --worn-denim-blues-3-4: #A4CCE5;
  --worn-denim-blues-3-5: #DCE9F2;
}

Tailwind config

theme: {
  extend: {
    colors: {
      "worn-denim-blues-3": {
        1: "#00203F",
        2: "#2B4C72",
        3: "#628FB6",
        4: "#A4CCE5",
        5: "#DCE9F2",
      }
    }
  }
}

Hex values

Color 1#00203F

Color 2#2B4C72

Color 3#628FB6

Color 4#A4CCE5

Color 5#DCE9F2

Accessibility

Contrast checker

1.9:1Fail

4.8:1AA

9.7:1AAA

13.3:1AAA

1.9:1Fail

2.6:1Fail

5.2:1AA

7.1:1AAA

4.8:1AA

2.6:1Fail

2:1Fail

2.8:1Fail

9.7:1AAA

5.2:1AA

2:1Fail

1.4:1Fail

13.3:1AAA

7.1:1AAA

2.8:1Fail

1.4:1Fail

Similar palettes

More like Worn Denim Blues