Palette

Denim Dream

Classic blues in varied washes, evoking the timeless comfort and style of beloved denim fabric.

coolretro5 colors

More cool palettes

Preview

See it in context.

Interface

New

Ready when you are.

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

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

Data visualization

#1A2A47#3B5A8F#6A8FC5#9FC5ED#D0E7FA

Palette guide

How to use Denim Dream

Overview

The Denim Dream palette offers classic blues in varied washes, evoking the timeless comfort and style of beloved denim fabric. It features a rich progression from the deep #1A2A47 and the robust #3B5A8F, through the balanced #6A8FC5 and the serene #9FC5ED, culminating in the airy #D0E7FA. This retro, classic, and casual collection is perfect for designers seeking to evoke familiarity, durability, and enduring style. Developers can utilize these hues for vintage-inspired branding, lifestyle applications, or relaxed UI designs that convey a sense of authenticity, comfort, and timeless appeal, like a favorite pair of jeans.

Best used for

Vintage apparel or accessory brands
Lifestyle and home decor websites
Retro-themed mobile games
Crafting or DIY communities
Casual dining establishment branding
Comfort-focused and inviting UI/UX

Suggested color roles

primary

#1A2A47 - The deepest, most foundational blue, ideal for expansive backgrounds or dominant brand elements, conveying robustness.

secondary

#3B5A8F - A rich, dark denim blue, perfect for content sections, headers, or secondary navigational components.

accent

#D0E7FA - A light, airy sky blue, excellent for interactive elements, calls to action, or fresh graphical accents, providing clear distinction.

background

#6A8FC5 - A balanced, mid-tone blue that serves as a versatile background for content, offering a soft, inviting base.

text

#D0E7FA - Recommended for primary text against darker backgrounds like #1A2A47 or #3B5A8F to ensure excellent readability.

Accessibility notes

Text in #D0E7FA against #1A2A47, #3B5A8F, or #6A8FC5 will provide good contrast, generally meeting WCAG AA standards.
Avoid using #9FC5ED for text on #D0E7FA, 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 #D0E7FA, are clearly distinguishable from adjacent lighter blues.

Recommended combinations

Denim Wash

To create layered backgrounds or for subtle distinctions between content blocks, mimicking varied denim washes.

#1A2A47 · #3B5A8F · #6A8FC5

Faded Comfort

Highlighting key information or interactive components, with #D0E7FA providing a crisp, clean focal point.

#3B5A8F · #D0E7FA · #9FC5ED

Vintage Blue

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

#1A2A47 · #6A8FC5 · #D0E7FA

CSS variables

:root {
  --denim-dream-2-1: #1A2A47;
  --denim-dream-2-2: #3B5A8F;
  --denim-dream-2-3: #6A8FC5;
  --denim-dream-2-4: #9FC5ED;
  --denim-dream-2-5: #D0E7FA;
}

Tailwind config

theme: {
  extend: {
    colors: {
      "denim-dream-2": {
        1: "#1A2A47",
        2: "#3B5A8F",
        3: "#6A8FC5",
        4: "#9FC5ED",
        5: "#D0E7FA",
      }
    }
  }
}

Hex values

Color 1#1A2A47

Color 2#3B5A8F

Color 3#6A8FC5

Color 4#9FC5ED

Color 5#D0E7FA

Accessibility

Contrast checker

2.1:1Fail

4.3:1AA18

8:1AAA

11.2:1AAA

2.1:1Fail

3.8:1AA18

5.4:1AA

4.3:1AA18

2.1:1Fail

1.8:1Fail

2.6:1Fail

8:1AAA

3.8:1AA18

1.8:1Fail

1.4:1Fail

11.2:1AAA

5.4:1AA

2.6:1Fail

1.4:1Fail

Similar palettes

More like Denim Dream

Denim Dream

See it in context.

Ready when you are.

Built with Denim Dream.

How to use Denim Dream

Overview

Best used for

Suggested color roles

Accessibility notes

Recommended combinations

Denim Wash

Faded Comfort

Vintage Blue

CSS variables

Tailwind config

Related searches

Hex values

Contrast checker

More like Denim Dream