Palette

Washed Indigo Jeans

The comfortable, time-worn feel of your favorite washed indigo jeans, soft and familiar.

coolcalm5 colors

More cool palettes

Preview

See it in context.

Interface

New

Ready when you are.

A quick look at how Washed Indigo 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 Washed Indigo Jeans.

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

Data visualization

#2C3E50#546A76#7D929E#AABBDD#C9D6DF

Palette guide

How to use Washed Indigo Jeans

Overview

The "Washed Indigo Jeans" palette evokes a sense of comfort and timeless style, drawing inspiration from classic denim. This cool-toned collection features muted blues and grays, perfect for creating calm, sophisticated digital experiences. From the deep, grounding #2C3E50 to the soft, airy #C9D6DF, these colors work harmoniously to convey a relaxed yet professional aesthetic. The mid-tones like #546A76 and #7D929E provide versatile options for layered designs, ensuring a cohesive and approachable feel. Developers will appreciate the predictable harmony, making it easy to implement across various UI components without jarring contrasts. This palette is ideal for projects aiming for a vintage, casual, or understated elegance.

Best used for

Casual apparel brand websites
Vintage-inspired e-commerce stores
Lifestyle blogs and portfolios
Mobile app interfaces seeking a calming aesthetic
Branding for artisan crafts or handmade goods
Interior design mood boards

Suggested color roles

primary

#2C3E50. Use this deep indigo-charcoal for key headings, brand elements, or primary calls to action where a strong, stable presence is desired without being overly harsh.

secondary

#546A76. A versatile mid-tone blue-grey, ideal for subheadings, secondary buttons, navigation elements, or larger content blocks to provide depth and visual interest.

accent

#AABBDD. This soft, light blue brings a subtle highlight. Employ it for hover states, active menu indicators, or small decorative elements to add a gentle touch of warmth.

background

#C9D6DF. A very light, almost off-white blue-grey, perfect for main content areas, card backgrounds, or page backdrops to create an open, clean, and calming canvas.

text

#2C3E50. For optimal readability, use this dark shade for primary body text and important labels. For secondary text or captions, consider #546A76 against lighter backgrounds.

Accessibility notes

Ensure sufficient contrast between #2C3E50 text and #C9D6DF background for WCAG AA compliance.
Avoid using #AABBDD for critical text, as its lightness may fail contrast requirements on light backgrounds.
When layering colors, test combinations like #546A76 text on #7D929E background for readability, especially for larger text.
For interactive elements, ensure distinct visual cues beyond color, particularly when using similar tones like #7D929E and #C9D6DF.

Recommended combinations

Classic Denim

This combination offers a balanced, professional look, perfect for corporate websites or sophisticated app interfaces where clarity and calm are priorities.

#2C3E50 · #546A76 · #C9D6DF

Soft Vintage

Ideal for creating a light, airy, and gentle aesthetic, suitable for blogs, portfolios, or product pages emphasizing softness and comfort.

#7D929E · #AABBDD · #C9D6DF

Deep Contrast

Provides a strong visual hierarchy with a dark primary, a mid-tone for support, and a soft accent, great for dashboards or data visualization.

#2C3E50 · #7D929E · #AABBDD

CSS variables

:root {
  --washed-indigo-jeans-1: #2C3E50;
  --washed-indigo-jeans-2: #546A76;
  --washed-indigo-jeans-3: #7D929E;
  --washed-indigo-jeans-4: #AABBDD;
  --washed-indigo-jeans-5: #C9D6DF;
}

Tailwind config

theme: {
  extend: {
    colors: {
      "washed-indigo-jeans": {
        1: "#2C3E50",
        2: "#546A76",
        3: "#7D929E",
        4: "#AABBDD",
        5: "#C9D6DF",
      }
    }
  }
}

Hex values

Color 1#2C3E50

Color 2#546A76

Color 3#7D929E

Color 4#AABBDD

Color 5#C9D6DF

Accessibility

Contrast checker

1.9:1Fail

3.4:1AA18

5.7:1AA

7.4:1AAA

1.9:1Fail

1.8:1Fail

2.9:1Fail

3.8:1AA18

3.4:1AA18

1.8:1Fail

1.7:1Fail

2.2:1Fail