Palette

Worn Denim Blues

Comfortable and classic blues, like a perfectly aged pair of denim jeans, familiar and inviting.

coolretro5 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

#627E9F#4F6D90#3D5C80#2B4C70#193C60

Palette guide

How to use Worn Denim Blues

Overview

The Worn Denim Blues palette offers a rich, coherent collection of deep to mid-range blues, reminiscent of perfectly aged denim. Featuring robust shades like #193C60 and #2B4C70, alongside more muted tones such as #627E9F, this palette exudes a sense of familiarity and classic appeal. It's an excellent choice for designers seeking to convey reliability, heritage, or a comfortable, vintage aesthetic without relying on bright or overly saturated colors. The cohesive range of blues allows for subtle gradients and depth, making it versatile for various design elements. Developers will find these hex codes straightforward to implement for consistent branding across all digital touchpoints.

Best used for

Vintage fashion e-commerce
Retro-themed branding projects
Automotive restoration websites
Craft beer or distillery branding
Classic rock music platforms
Photography blogs with a moody aesthetic

Suggested color roles

primary

Use #193C60 for dominant elements, conveying a strong, established presence.

secondary

A versatile mid-tone like #2B4C70 is ideal for subheadings, navigation, or content sections.

accent

Employ #627E9F as a softer accent for interactive elements or visual highlights that need to blend subtly.

background

For backgrounds, #3D5C80 provides a rich, deep base, or use #627E9F for a lighter, yet still substantial, feel.

text

On darker backgrounds, a light off-white or very light grey will provide excellent contrast for readability.

Accessibility notes

Ensure sufficient contrast for text on any background within this palette, especially lighter text on #627E9F.
Consider using a very light gray or white for all body text to ensure readability against these deep blues.
Avoid pairing #627E9F with #4F6D90 for text, as contrast will be poor.
Interactive elements should have clear focus states, as color contrast within the palette can be subtle.

Recommended combinations

Deep Heritage

Perfect for creating a sophisticated, layered look, with the darkest as a base and lighter tones for details.

#193C60 · #2B4C70 · #627E9F

Subtle Gradient

Ideal for backgrounds or large sections where a smooth, understated transition of tones is desired.

#3D5C80 · #4F6D90 · #627E9F

Classic Contrast

Use #193C60 for text or main elements, with #627E9F as a background, and #3D5C80 for secondary accents.

#193C60 · #627E9F · #3D5C80

CSS variables

:root {
  --worn-denim-blues-4-1: #627E9F;
  --worn-denim-blues-4-2: #4F6D90;
  --worn-denim-blues-4-3: #3D5C80;
  --worn-denim-blues-4-4: #2B4C70;
  --worn-denim-blues-4-5: #193C60;
}

Tailwind config

theme: {
  extend: {
    colors: {
      "worn-denim-blues-4": {
        1: "#627E9F",
        2: "#4F6D90",
        3: "#3D5C80",
        4: "#2B4C70",
        5: "#193C60",
      }
    }
  }
}

Hex values

Color 1#627E9F

Color 2#4F6D90

Color 3#3D5C80

Color 4#2B4C70

Color 5#193C60

Accessibility

Contrast checker

1.3:1Fail

1.6:1Fail

2.1:1Fail

2.7:1Fail

1.3:1Fail

1.7:1Fail

2.1:1Fail

1.6:1Fail

1.3:1Fail

1.6:1Fail

2.1:1Fail

1.7:1Fail

1.3:1Fail

2.7:1Fail

2.1:1Fail

1.6:1Fail

1.3: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

Deep Heritage

Subtle Gradient

Classic Contrast

CSS variables

Tailwind config

Related searches

Hex values

Contrast checker

More like Worn Denim Blues