Back to palettes

Palette

Faded Denim Wash

Comfortable and casual blues, reminiscent of well-loved, faded denim jeans on a clear day.

CoolCalm5 colors
More Cool palettes

Preview

See it in context.

Interface

New

Ready when you are.

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

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

Data visualization

#42A5F5#64B5F6#90CAF9#BBDEFB#E3F2FD

Palette guide

How to use Faded Denim Wash

Overview

The 'Faded Denim Wash' palette offers a refreshing and cohesive spectrum of light, airy blues, reminiscent of well-worn denim on a bright, clear day. Starting with the vibrant #42A5F5, it gracefully lightens through #64B5F6 and #90CAF9, culminating in the serene #BBDEFB and the almost ethereal #E3F2FD. This monochromatic scheme provides designers with an excellent tool for creating visually harmonious and calm interfaces. Developers will find it easy to maintain consistency across various UI components, delivering a clean, approachable user experience that feels both casual and polished.

Best used for

  • Clean, modern web and mobile application interfaces
  • Branding for eco-friendly or sustainable products
  • Lifestyle blogs and travel photography showcases
  • Casual fashion e-commerce platforms
  • Designs aiming for a refreshing, airy, and calm mood
  • UI/UX that prioritizes clarity and a soft aesthetic

Suggested color roles

primary

Use #42A5F5 for impactful headers, primary buttons, or key navigational elements, providing a clear focal point.

secondary

Apply #64B5F6 for subheadings, secondary calls-to-action, or significant background sections, offering a softer yet distinct presence.

accent

Incorporate #90CAF9 for interactive elements, links, or subtle highlights, providing a gentle visual cue without being overpowering.

background

Utilize #E3F2FD as a crisp, light canvas, ensuring maximum readability and an expansive, airy feel.

text

Employ #42A5F5 for primary body text on light backgrounds like #E3F2FD, ensuring excellent legibility. For softer text, a dark charcoal or black.

Accessibility notes

  • #42A5F5 text on #E3F2FD background provides good contrast for body text.
  • Avoid using #BBDEFB or #E3F2FD for small text; their low contrast makes them difficult to read.
  • Ensure interactive elements use sufficient visual cues beyond color, such as underlines or icons.
  • For larger text or headings, #64B5F6 on #E3F2FD offers a gentle, readable option.

Recommended combinations

Bright Sky

Creates a vibrant yet soft look, perfect for hero sections or branding that needs to feel fresh and approachable.

#42A5F5 · #64B5F6 · #E3F2FD

Gentle Flow

Ideal for subtle gradients, background textures, or layered UI elements, offering a smooth visual transition.

#64B5F6 · #90CAF9 · #BBDEFB

Clean & Clear

Provides a balanced contrast for information hierarchy, suitable for dashboards or content-rich pages.

#42A5F5 · #90CAF9 · #E3F2FD

CSS variables

:root {
  --faded-denim-wash-1: #42A5F5;
  --faded-denim-wash-2: #64B5F6;
  --faded-denim-wash-3: #90CAF9;
  --faded-denim-wash-4: #BBDEFB;
  --faded-denim-wash-5: #E3F2FD;
}

Tailwind config

theme: {
  extend: {
    colors: {
      "faded-denim-wash": {
        1: "#42A5F5",
        2: "#64B5F6",
        3: "#90CAF9",
        4: "#BBDEFB",
        5: "#E3F2FD",
      }
    }
  }
}

Related searches

light blue color palettefaded blue web designclear sky color schemesoft denim wash colorscalm ui colors

Palette colors

Hex values

Color 1#42A5F5
·
Color 2#64B5F6
·
Color 3#90CAF9
·
Color 4#BBDEFB
·
Color 5#E3F2FD
·

Accessibility

Contrast checker

1
2
3
4
5
1
1.2:1Fail
1.5:1Fail
1.9:1Fail
2.3:1Fail
2
1.2:1Fail
1.3:1Fail
1.6:1Fail
1.9:1Fail
3
1.5:1Fail
1.3:1Fail
1.2:1Fail
1.5:1Fail
4
1.9:1Fail
1.6:1Fail
1.2:1Fail
1.2:1Fail
5
2.3:1Fail
1.9:1Fail
1.5:1Fail
1.2:1Fail

Similar palettes

More like Faded Denim Wash

View all Cool