Palette

Faded Denim Blues

Comforting and worn, like your favorite pair of faded blue jeans on a relaxed day.

coolcalm5 colors

More cool palettes

Preview

See it in context.

Interface

New

Ready when you are.

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

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

Data visualization

#4A7A97#6D9DB8#8FBBD0#B2D8E8#D6F1FA

Palette guide

How to use Faded Denim Blues

Overview

The "Faded Denim Blues" palette (original) offers a comforting and worn collection of cool blue tones, reminiscent of your favorite pair of faded blue jeans on a relaxed day. This serene and casual palette features a deep teal-blue (#4A7A97), a medium blue (#6D9DB8), a light medium blue (#8FBBD0), a pale blue (#B2D8E8), and a very pale aqua-blue (#D6F1FA). Designers and developers can utilize these harmonious shades to create interfaces, branding, or editorial content that exudes a sense of calm, approachability, and everyday comfort. It's an excellent choice for projects seeking a soft, trustworthy, and subtly casual aesthetic.

Best used for

Casual lifestyle product branding
Relaxation or meditation apps
Home goods e-commerce sites
Personal blogs with a serene aesthetic
Eco-conscious brand identity
Educational content with a calming tone

Suggested color roles

primary

#D6F1FA (Very Pale Aqua-Blue) - An excellent, airy, and expansive background color, providing a fresh, calming canvas that enhances readability.

secondary

#6D9DB8 (Medium Blue) - Ideal for headings, navigation, or feature panels, offering a gentle yet clear visual anchor.

accent

#4A7A97 (Deep Teal-Blue) - Use for call-to-action buttons, important links, or subtle graphic details to provide depth and a strong focal point.

background

#D6F1FA (Very Pale Aqua-Blue) - Establishes a serene and open base, ensuring that darker text and interactive elements stand out clearly.

text

#4A7A97 (Deep Teal-Blue) is an excellent choice for body text on #D6F1FA, providing strong readability. A standard black or dark charcoal can also be used.

Accessibility notes

#4A7A97 provides good contrast against #D6F1FA for text; ensure it passes WCAG AA for normal text.
#6D9DB8 and #8FBBD0 can be used for larger text elements on #D6F1FA, but always verify contrast for smaller font sizes.
Avoid using #B2D8E8 or #D6F1FA for critical text on similar light backgrounds due to very low contrast.
For interactive elements, ensure distinct visual cues for focus and hover states with sufficient contrast.

Recommended combinations

Comforting Read

Ideal for content-heavy pages: #D6F1FA background, #4A7A97 for body text, and #6D9DB8 for headings.

#D6F1FA · #4A7A97 · #6D9DB8

Soft Layers

Excellent for creating subtle depth in UI elements like cards or progress indicators, using harmonious blues.

#B2D8E8 · #8FBBD0 · #6D9DB8

Deep Anchor

Apply #D6F1FA as a canvas, #4A7A97 for strong calls to action, and #B2D8E8 for supportive visuals or borders.

#D6F1FA · #4A7A97 · #B2D8E8

CSS variables

:root {
  --faded-denim-blues-1: #4A7A97;
  --faded-denim-blues-2: #6D9DB8;
  --faded-denim-blues-3: #8FBBD0;
  --faded-denim-blues-4: #B2D8E8;
  --faded-denim-blues-5: #D6F1FA;
}

Tailwind config

theme: {
  extend: {
    colors: {
      "faded-denim-blues": {
        1: "#4A7A97",
        2: "#6D9DB8",
        3: "#8FBBD0",
        4: "#B2D8E8",
        5: "#D6F1FA",
      }
    }
  }
}

Hex values

Color 1#4A7A97

Color 2#6D9DB8

Color 3#8FBBD0

Color 4#B2D8E8

Color 5#D6F1FA

Accessibility

Contrast checker

1.6:1Fail

2.3:1Fail

3.1:1AA18

3.9:1AA18

1.6:1Fail

1.4:1Fail

1.9:1Fail

2.5:1Fail

2.3:1Fail

1.4:1Fail

1.7:1Fail

3.1:1AA18

1.9:1Fail

1.4:1Fail

1.3:1Fail

3.9:1AA18

2.5:1Fail

1.7:1Fail

1.3:1Fail

Similar palettes

More like Faded Denim Blues

Faded Denim Blues

See it in context.

Ready when you are.

Built with Faded Denim Blues.

How to use Faded Denim Blues

Overview

Best used for

Suggested color roles

Accessibility notes

Recommended combinations

Comforting Read

Soft Layers

Deep Anchor

CSS variables

Tailwind config

Related searches

Hex values

Contrast checker

More like Faded Denim Blues