Palette

Denim Blues Wash

A timeless progression of indigo and sky blues, reminiscent of well-loved denim and a clear sky.

coolcalm5 colors

More cool palettes

Preview

See it in context.

Interface

New

Ready when you are.

A quick look at how Denim Blues Wash 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 Denim Blues Wash.

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

Data visualization

#191970#4169E1#6495ED#87CEFA#ADD8E6

Palette guide

How to use Denim Blues Wash

Overview

The Denim Blues Wash palette presents a timeless progression of indigo and sky blues, reminiscent of well-loved denim and a clear sky. It features the deep, rich indigo #191970, transitioning through the vibrant #4169E1 and the serene #6495ED, to the lighter #87CEFA and the airy #ADD8E6. This calm, classic, and cool collection is perfect for designers seeking to evoke familiarity, freshness, and a sense of enduring style. Developers can utilize these hues for casual fashion brands, outdoor lifestyle applications, or clean UI designs that convey reliability, approachability, and a refreshing aesthetic, like a perfect spring day.

Best used for

Casual fashion or apparel e-commerce
Outdoor recreation and travel apps
Youth-focused brand identities
Modern web design with a classic feel
Education or non-profit organizations
Refreshing and clean mobile interfaces

Suggested color roles

primary

#191970 - The deepest, most foundational indigo, ideal for expansive backgrounds or dominant brand elements, conveying depth.

secondary

#4169E1 - A vibrant royal blue, perfect for content sections, headers, or secondary navigational components.

accent

#ADD8E6 - A light, airy sky blue, excellent for interactive elements, calls to action, or refreshing graphical accents, providing a clear pop.

background

#6495ED - A balanced, cornflower blue that serves as a versatile background for content, offering a soft, inviting base.

text

#ADD8E6 - Recommended for primary text against darker backgrounds like #191970 or #4169E1 to ensure excellent readability.

Accessibility notes

Text in #ADD8E6 against #191970, #4169E1, or #6495ED will provide good contrast, generally meeting WCAG AA standards.
Avoid using #87CEFA for text on #ADD8E6, as contrast will be insufficient for readability.
For critical information, especially on mid-tones, consider using a darker charcoal or black text for maximum legibility.
Ensure interactive elements, particularly those using #ADD8E6, are clearly distinguishable from adjacent lighter blues.

Recommended combinations

Indigo Flow

To create smooth, layered backgrounds or for subtle distinctions between content blocks, mimicking blue washes.

#191970 · #4169E1 · #6495ED

Sky Accent

Highlighting key information or interactive components, with #ADD8E6 providing a fresh, clear focal point.

#4169E1 · #ADD8E6 · #87CEFA

Classic Blue

Effective for classic branding or clean UI elements, offering a harmonious progression from deep to light blue.

#191970 · #6495ED · #ADD8E6

CSS variables

:root {
  --denim-blues-wash-1: #191970;
  --denim-blues-wash-2: #4169E1;
  --denim-blues-wash-3: #6495ED;
  --denim-blues-wash-4: #87CEFA;
  --denim-blues-wash-5: #ADD8E6;
}

Tailwind config

theme: {
  extend: {
    colors: {
      "denim-blues-wash": {
        1: "#191970",
        2: "#4169E1",
        3: "#6495ED",
        4: "#87CEFA",
        5: "#ADD8E6",
      }
    }
  }
}

Hex values

Color 1#191970

Color 2#4169E1

Color 3#6495ED

Color 4#87CEFA

Color 5#ADD8E6

Accessibility

Contrast checker

3.1:1AA18

5:1AA

8.7:1AAA

9.7:1AAA

3.1:1AA18

1.6:1Fail

2.8:1Fail

3.2:1AA18

5:1AA

1.6:1Fail

1.7:1Fail

1.9:1Fail