Palette

Faded Denim Patchwork

Soft, lived-in blues and muted grays, reminiscent of comfortable, worn denim patches stitched together.

coolcalm5 colors

More cool palettes

Preview

See it in context.

Interface

New

Ready when you are.

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

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

Data visualization

#3E5A7B#6A86A8#9CB1C9#C8D4E0#E0E7ED

Palette guide

How to use Faded Denim Patchwork

Overview

The 'Faded Denim Patchwork' palette offers a serene collection of cool blues and soft grays, evoking comfort and timeless style. Anchored by the deep #3E5A7B, it transitions smoothly through the mid-tone #6A86A8 and the gentle #9CB1C9, culminating in the airy #C8D4E0 and the nearly white #E0E7ED. This palette is ideal for creating designs with a relaxed, vintage, or understated elegance. Designers can leverage its cohesive range for depth and visual hierarchy, while developers will appreciate the predictable harmony across UI elements. It's perfect for projects aiming for a casual yet sophisticated aesthetic, reminiscent of well-loved textiles and tranquil skies.

Best used for

Casual fashion branding and e-commerce websites
Vintage-themed digital interfaces and mobile apps
Home decor product showcases and interior design blogs
Relaxed lifestyle photography and editorial layouts
Branding for artisan crafts or sustainable fashion
Comfort-focused UI/UX designs

Suggested color roles

primary

Use #3E5A7B for strong headings, primary buttons, or foundational brand elements, providing a solid, trustworthy anchor.

secondary

Apply #6A86A8 for subheadings, secondary calls-to-action, or significant background sections, offering a softer yet substantial presence.

accent

Incorporate #9CB1C9 for interactive elements, highlights, or decorative details where a subtle lift is desired without harsh contrast.

background

Utilize #E0E7ED as a clean, light background for main content areas, ensuring excellent readability and an airy feel.

text

Employ #3E5A7B for primary body text, ensuring high contrast against lighter backgrounds like #E0E7ED. For lighter text on darker backgrounds, a near-white like #E0E7ED can work.

Accessibility notes

Ensure sufficient contrast for text: #3E5A7B text on #E0E7ED background meets AA standards.
Avoid using #C8D4E0 for small text on #E0E7ED; their proximity in lightness can hinder readability.
Interactive elements using #9CB1C9 should have clear visual cues beyond color for accessibility.
For larger text, #6A86A8 on #E0E7ED provides good readability, but check small text contrast.

Recommended combinations

Classic Denim

Ideal for a clean, professional look with good contrast, suitable for corporate or editorial designs.

#3E5A7B · #6A86A8 · #E0E7ED

Soft Vintage

Creates a gentle, muted aesthetic, perfect for lifestyle blogs, artisan product sites, or subtle UI elements.

#6A86A8 · #9CB1C9 · #C8D4E0

Deep Horizon

Offers a balanced contrast for headers, hero sections, or interactive dashboards, combining depth with lightness.

#3E5A7B · #9CB1C9 · #E0E7ED

CSS variables

:root {
  --faded-denim-patchwork-1: #3E5A7B;
  --faded-denim-patchwork-2: #6A86A8;
  --faded-denim-patchwork-3: #9CB1C9;
  --faded-denim-patchwork-4: #C8D4E0;
  --faded-denim-patchwork-5: #E0E7ED;
}

Tailwind config

theme: {
  extend: {
    colors: {
      "faded-denim-patchwork": {
        1: "#3E5A7B",
        2: "#6A86A8",
        3: "#9CB1C9",
        4: "#C8D4E0",
        5: "#E0E7ED",
      }
    }
  }
}

Hex values

Color 1#3E5A7B

Color 2#6A86A8

Color 3#9CB1C9

Color 4#C8D4E0

Color 5#E0E7ED

Accessibility

Contrast checker

1.9:1Fail

3.2:1AA18

4.7:1AA

5.7:1AA

1.9:1Fail

1.7:1Fail

2.5:1Fail

3:1AA18