Back to palettes

Palette

Worn Blue Jeans

The comforting, faded blues of well-worn denim, evoking a sense of history and casual ease.

neutralcalm5 colors
More neutral palettes

Preview

See it in context.

Interface

New

Ready when you are.

A quick look at how Worn Blue Jeans 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 Blue Jeans.

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

Data visualization

#2F4F4F#466C6B#6A8E8D#9BBEC0#CDE0E1

Palette guide

How to use Worn Blue Jeans

Overview

The Worn Blue Jeans palette embodies the comforting, faded blues of well-loved denim, creating a sense of history and casual ease. With deep tones like #2F4F4F, mid-range blues such as #466C6B and #6A8E8D, and the soft, light #CDE0E1, this palette offers a versatile, cool aesthetic. Designers and developers can utilize these hues to evoke familiarity and understated style. The inclusion of #9BBEC0 provides a gentle accent, making it perfect for projects that aim for a relaxed, vintage-inspired, or timeless appeal in digital and print media.

Best used for

  • Casual apparel brand identity
  • Vintage-inspired web design
  • Denim product marketing campaigns
  • Relaxed lifestyle blogs and content
  • Retro-themed event decor and invitations
  • Mobile apps with a cozy, familiar user interface

Suggested color roles

primary

#2F4F4F serves as a deep, muted teal-blue, ideal for main structural elements, headers, or navigation.

secondary

#466C6B provides a classic mid-tone denim blue, suitable for secondary content blocks or supporting visuals.

accent

#6A8E8D offers a faded, soft blue-green, perfect for subtle highlights, interactive states, or decorative elements.

background

#CDE0E1 acts as a light, airy, almost white base, providing a clean and open canvas.

text

#2F4F4F is a dark, legible blue that ensures good readability for body text, or use black for maximum contrast.

Accessibility notes

  • Ensure #2F4F4F on #CDE0E1 provides strong contrast for body text (WCAG AA).
  • Verify sufficient contrast for #466C6B when used as text on lighter backgrounds like #CDE0E1.
  • Be mindful that #9BBEC0 may lack sufficient contrast for small text on very light backgrounds.
  • Consider white or a very light grey for text on darker hues like #2F4F4F or #466C6B.

Recommended combinations

Faded Denim

Creates a rich, layered denim effect for backgrounds or textural elements.

#2F4F4F · #466C6B · #6A8E8D

Light Wash

Ideal for lighter sections, evoking a worn, sun-faded aesthetic.

#6A8E8D · #9BBEC0 · #CDE0E1

Classic Jeans

A balanced trio for general UI, offering clear hierarchy with a timeless, casual feel.

#2F4F4F · #CDE0E1 · #466C6B

CSS variables

:root {
  --worn-blue-jeans-1: #2F4F4F;
  --worn-blue-jeans-2: #466C6B;
  --worn-blue-jeans-3: #6A8E8D;
  --worn-blue-jeans-4: #9BBEC0;
  --worn-blue-jeans-5: #CDE0E1;
}

Tailwind config

theme: {
  extend: {
    colors: {
      "worn-blue-jeans": {
        1: "#2F4F4F",
        2: "#466C6B",
        3: "#6A8E8D",
        4: "#9BBEC0",
        5: "#CDE0E1",
      }
    }
  }
}

Related searches

denim color palettefaded blue schemevintage cool colorscasual aesthetic designneutral blue tones

Palette colors

Hex values

Color 1#2F4F4F
·
Color 2#466C6B
·
Color 3#6A8E8D
·
Color 4#9BBEC0
·
Color 5#CDE0E1
·

Accessibility

Contrast checker

1
2
3
4
5
1
1.5:1Fail
2.5:1Fail
4.5:1AA18
6.5:1AA
2
1.5:1Fail
1.6:1Fail
2.9:1Fail
4.2:1AA18
3
2.5:1Fail
1.6:1Fail
1.8:1Fail
2.6:1Fail
4
4.5:1AA18
2.9:1Fail
1.8:1Fail
1.5:1Fail
5
6.5:1AA
4.2:1AA18
2.6:1Fail
1.5:1Fail

Similar palettes

More like Worn Blue Jeans

View all neutral
Faded Denim
Indigo Denim Faded
Aged Papyrus Scrolls
Aged Parchment Pages
Ancient Library Binding
Ancient Tome Patina