Palette

Denim Dream

Classic blues in varying shades, reminiscent of soft, worn denim and comforting, timeless style.

coolcalm5 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

#1560BD#4169E1#4682B4#6495ED#ADD8E6

Palette guide

How to use Denim Dream

Overview

The Denim Dream palette offers a versatile collection of cool blues, perfect for evoking a sense of calm, reliability, and classic style. Featuring shades like the deep #1560BD and the brighter #ADD8E6, alongside mid-tones such as #4169E1, #4682B4, and #6495ED, this palette provides a rich spectrum for both digital and print applications. Designers can leverage its inherent familiarity to create approachable and trustworthy interfaces or branding. Developers will find these blues easy to implement for consistent UI elements, ensuring a harmonious visual experience across various platforms. Its timeless appeal makes it a go-to for projects seeking a blend of comfort and modern elegance.

Best used for

Casual apparel branding and e-commerce sites
Tech product interfaces (e.g., productivity apps)
Editorial design for lifestyle or travel blogs
Corporate branding for reliable services
Interior design mood boards (coastal, modern farmhouse)
Packaging for classic or natural products

Suggested color roles

primary

#1560BD - Ideal for brand logos, main headings, or primary call-to-action buttons, conveying strength and stability.

secondary

#4169E1 - Excellent for subheadings, navigation links, or secondary interactive elements, offering a vibrant yet harmonious contrast.

accent

#ADD8E6 - Best used sparingly for highlights, small icons, or to draw attention to key information, adding a fresh, airy touch.

background

#6495ED - A soft, inviting background for content sections or subtle page backgrounds, ensuring readability.

text

Use a dark charcoal or black for main body text against lighter blues, or white/off-white against darker blues like #1560BD for optimal contrast.

Accessibility notes

Ensure sufficient contrast between dark blues like #1560BD and light text (e.g., white).
Avoid using adjacent light blues like #ADD8E6 and #6495ED for text and background without careful contrast checks.
#4169E1 and #4682B4 provide good mid-tone options; test text contrast thoroughly.
For interactive elements, ensure focus states use a sufficiently contrasting color from the palette.

Recommended combinations

Classic Blue

A robust combination for corporate websites or educational platforms, establishing trust and clarity.

#1560BD · #ADD8E6 · #4169E1

Soft Denim

Perfect for lifestyle blogs, relaxation apps, or casual brand identity, offering a light, airy feel.

#6495ED · #ADD8E6 · #4682B4

Deep Ocean

Creates a sophisticated and deep aesthetic suitable for professional services or luxury brand applications.

#1560BD · #4682B4 · #4169E1

CSS variables

:root {
  --denim-dream-1: #1560BD;
  --denim-dream-2: #4169E1;
  --denim-dream-3: #4682B4;
  --denim-dream-4: #6495ED;
  --denim-dream-5: #ADD8E6;
}

Tailwind config

theme: {
  extend: {
    colors: {
      "denim-dream": {
        1: "#1560BD",
        2: "#4169E1",
        3: "#4682B4",
        4: "#6495ED",
        5: "#ADD8E6",
      }
    }
  }
}

Hex values

Color 1#1560BD

Color 2#4169E1

Color 3#4682B4

Color 4#6495ED

Color 5#ADD8E6

Accessibility

Contrast checker

1.3:1Fail

1.5:1Fail

2.1:1Fail

4:1AA18

1.3:1Fail

1.2:1Fail

1.6:1Fail

3.2:1AA18

1.5:1Fail

1.2:1Fail

1.4:1Fail

2.7:1Fail