Palette

Faded Denim Blues

Classic, comforting blues, reminiscent of well-worn denim, evoking a sense of timeless casual style.

coolretro5 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

#DDEBF5#B0D0E5#85B5D0#5A9BC0#3080B0

Palette guide

How to use Faded Denim Blues

Overview

The "Faded Denim Blues" palette (version 2) offers a comforting and classic gradient of blues, reminiscent of well-worn, sun-faded denim. This cool and timeless collection includes a very light blue (#DDEBF5), a light blue (#B0D0E5), a medium-light blue (#85B5D0), a medium blue (#5A9BC0), and a deep blue (#3080B0). Designers and developers can effectively use these harmonious shades to create interfaces, branding, or editorial content that conveys a sense of casual sophistication, reliability, and enduring style. It's an excellent choice for projects seeking a clean, approachable, and subtly retro aesthetic, perfect for everyday brands or digital products.

Best used for

Casual apparel brand websites
Tech company dashboards
Educational platform interfaces
Travel and leisure booking sites
Men's grooming product packaging
Relaxed lifestyle blog designs

Suggested color roles

primary

#DDEBF5 (Very Light Blue) - An ideal clean, airy background, providing a fresh and calming canvas that enhances readability and the overall blue harmony.

secondary

#5A9BC0 (Medium Blue) - Excellent for primary navigation, main headings, or feature panels, offering a clear and inviting visual anchor.

accent

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

background

#DDEBF5 (Very Light Blue) - Creates a serene and professional base, ensuring that darker text and interactive elements stand out clearly.

text

#3080B0 (Deep Blue) is perfect for body text on #DDEBF5, providing excellent readability. For a softer look, a dark charcoal could also be used.

Accessibility notes

#3080B0 provides excellent contrast against #DDEBF5 for text; ensure it passes WCAG AA for normal text.
#5A9BC0 and #85B5D0 can be used for larger text elements on #DDEBF5, but verify contrast for smaller sizes.
Avoid using #B0D0E5 or #DDEBF5 for small text directly on each other due to insufficient contrast.
For interactive elements, ensure distinct visual cues for focus and hover states with sufficient contrast.

Recommended combinations

Classic Base

Ideal for clean web layouts: #DDEBF5 background, #3080B0 for body text, and #5A9BC0 for headings/links.

#DDEBF5 · #3080B0 · #5A9BC0

Layered Blues

Excellent for creating depth in UI components like cards or progress bars, using subtle blue variations.

#B0D0E5 · #85B5D0 · #5A9BC0

Deep Accent

Apply #DDEBF5 as a canvas, #3080B0 for strong visual anchors, and #B0D0E5 for supportive text or borders.

#DDEBF5 · #3080B0 · #B0D0E5

CSS variables

:root {
  --faded-denim-blues-2-1: #DDEBF5;
  --faded-denim-blues-2-2: #B0D0E5;
  --faded-denim-blues-2-3: #85B5D0;
  --faded-denim-blues-2-4: #5A9BC0;
  --faded-denim-blues-2-5: #3080B0;
}

Tailwind config

theme: {
  extend: {
    colors: {
      "faded-denim-blues-2": {
        1: "#DDEBF5",
        2: "#B0D0E5",
        3: "#85B5D0",
        4: "#5A9BC0",
        5: "#3080B0",
      }
    }
  }
}

Hex values

Color 1#DDEBF5

Color 2#B0D0E5

Color 3#85B5D0

Color 4#5A9BC0

Color 5#3080B0

Accessibility

Contrast checker

1.3:1Fail

1.8:1Fail

2.5:1Fail

3.6:1AA18

1.3:1Fail

1.4:1Fail

1.9:1Fail

2.7:1Fail

1.8:1Fail

1.4:1Fail

2:1Fail

2.5:1Fail

1.9:1Fail

1.4:1Fail

3.6:1AA18

2.7:1Fail

2:1Fail

1.4: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

Classic Base

Layered Blues

Deep Accent

CSS variables

Tailwind config

Related searches

Hex values

Contrast checker

More like Faded Denim Blues