Palette

Faded Denim Dreams

Comfortable, well-worn blues, like your favorite pair of faded denim jeans on a relaxed afternoon.

coolcalm5 colors

More cool palettes

Preview

See it in context.

Interface

New

Ready when you are.

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

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

Data visualization

#3A536F#5A7C9F#8BB0D1#B4CCEA#DBE7F4

Palette guide

How to use Faded Denim Dreams

Overview

The Faded Denim Dreams palette offers a comforting spectrum of well-worn blues, evoking the relaxed atmosphere of a favorite pair of jeans on a lazy afternoon. Ranging from the deep #3A536F to the airy #DBE7F4, this collection provides a seamless gradient that is both soothing and versatile. Designers can use these hues to craft serene brand identities, inviting web layouts, and soft, approachable digital experiences. Developers will find this palette excellent for creating intuitive user interfaces where visual harmony and gentle transitions are key. The inherent calm of these blues ensures a cohesive and pleasant aesthetic across all applications.

Best used for

Serene web designs and relaxation apps
Children's brands and educational materials
Soft product packaging and lifestyle goods
Comforting blog themes and personal websites
Wellness and mindfulness platforms
Artistic illustrations and gentle infographics

Suggested color roles

primary

Utilize #5A7C9F for core brand elements, main headings, or calls to action, providing a balanced, inviting blue.

secondary

Apply #3A536F for strong contrast in subheadings, navigation, or footer elements, offering a deep anchor.

accent

Employ #B4CCEA as a soft accent for highlights, interactive states, or decorative patterns, adding a faded touch.

background

Use #DBE7F4 for expansive backgrounds, creating an airy, near-white canvas that feels fresh and open.

text

For dark, highly readable text, #3A536F provides excellent contrast, especially on lighter shades like #DBE7F4.

Accessibility notes

Ensure #3A536F text on #DBE7F4 background meets WCAG AA or AAA contrast for optimal readability.
Be cautious with text on #B4CCEA; prefer darker text or use this color for non-text elements.
Use the darkest blues, #3A536F and #5A7C9F, to clearly define interactive elements.
Maintain consistent visual hierarchy by varying shades for different levels of information, ensuring legibility.

Recommended combinations

Deep Serenity

Creates a rich, calming depth, ideal for headers, main content areas, and subtle background textures.

#3A536F · #5A7C9F · #8BB0D1

Soft Gradient

Excellent for light, airy sections, card backgrounds, or gentle visual transitions, evoking a faded look.

#8BB0D1 · #B4CCEA · #DBE7F4

Contrast & Calm

Provides a strong anchor with soft accents and a bright background, perfect for clear calls to action or key information.

#3A536F · #B4CCEA · #DBE7F4

CSS variables

:root {
  --faded-denim-dreams-1: #3A536F;
  --faded-denim-dreams-2: #5A7C9F;
  --faded-denim-dreams-3: #8BB0D1;
  --faded-denim-dreams-4: #B4CCEA;
  --faded-denim-dreams-5: #DBE7F4;
}

Tailwind config

theme: {
  extend: {
    colors: {
      "faded-denim-dreams": {
        1: "#3A536F",
        2: "#5A7C9F",
        3: "#8BB0D1",
        4: "#B4CCEA",
        5: "#DBE7F4",
      }
    }
  }
}

Hex values

Color 1#3A536F

Color 2#5A7C9F

Color 3#8BB0D1

Color 4#B4CCEA

Color 5#DBE7F4

Accessibility

Contrast checker

1.8:1Fail

3.5:1AA18

4.8:1AA

6.3:1AA

1.8:1Fail

1.9:1Fail

2.6:1Fail

3.5:1AA18

1.9:1Fail

1.4:1Fail

1.8:1Fail

4.8:1AA

2.6:1Fail

1.4:1Fail

1.3:1Fail

6.3:1AA

3.5:1AA18

1.8:1Fail

1.3:1Fail

Similar palettes

More like Faded Denim Dreams

Faded Denim Dreams

See it in context.

Ready when you are.

Built with Faded Denim Dreams.

How to use Faded Denim Dreams

Overview

Best used for

Suggested color roles

Accessibility notes

Recommended combinations

Deep Serenity

Soft Gradient

Contrast & Calm

CSS variables

Tailwind config

Related searches

Hex values

Contrast checker

More like Faded Denim Dreams