Palette

Denim Blue Quilt

Comfortable and classic, like a beloved denim quilt, showing various shades of indigo and faded blues.

coolcalm5 colors

More cool palettes

Preview

See it in context.

Interface

New

Ready when you are.

A quick look at how Denim Blue Quilt 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 Denim Blue Quilt.

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

Data visualization

#4682B4#1E3A5A#87CEEB#708090#F0F8FF

Palette guide

How to use Denim Blue Quilt

Overview

The Denim Blue Quilt palette offers a comfortable and classic collection, akin to a beloved denim quilt, showcasing various shades of indigo and faded blues. It features the deep, foundational #1E3A5A, the mid-tone #4682B4, and the serene #87CEEB, complemented by the muted #708090 and the crisp, near-white #F0F8FF. This calm, casual, and retro collection is perfect for designers seeking to evoke comfort, timelessness, and a touch of Americana. Developers can utilize these hues for lifestyle brands, vintage-inspired applications, or relaxed UI designs that convey a sense of familiarity, durability, and understated charm, like a cherished garment.

Best used for

Casual apparel or lifestyle brands
Vintage-inspired websites or apps
Home decor or textile design
Crafting or DIY blogs
Comfort-focused hospitality branding
Relaxed and user-friendly UI/UX

Suggested color roles

primary

#1E3A5A - The deepest, most foundational blue, ideal for expansive backgrounds or dominant brand elements, conveying stability.

secondary

#4682B4 - A classic steel blue, perfect for content sections, headers, or secondary navigational components.

accent

#87CEEB - A bright, sky blue, excellent for interactive elements, calls to action, or cheerful graphical accents, providing a fresh pop.

background

#708090 - A muted, neutral grey-blue that serves as a versatile background for content, offering a soft, calming base.

text

#F0F8FF - Recommended for primary text against darker backgrounds like #1E3A5A or #4682B4 to ensure excellent readability.

Accessibility notes

Text in #F0F8FF against #1E3A5A, #4682B4, or #708090 will provide good contrast, generally meeting WCAG AA standards.
Avoid using #87CEEB for text on #F0F8FF, as contrast will be insufficient for readability.
For critical information, especially on mid-tones, consider using a darker charcoal or black text for maximum legibility.
Ensure interactive elements, particularly those using #87CEEB, are clearly distinguishable from adjacent lighter blues.

Recommended combinations

Faded Denim

To create layered backgrounds or for subtle distinctions between content blocks, mimicking denim washes.

#1E3A5A · #4682B4 · #708090

Quilt Stitch

Highlighting key information or interactive components, with #F0F8FF providing a crisp, clean focal point.

#4682B4 · #F0F8FF · #87CEEB

Classic Blue

Effective for casual branding or friendly UI elements, offering a harmonious blend of deep and light blues.

#1E3A5A · #87CEEB · #708090

CSS variables

:root {
  --denim-blue-quilt-1: #4682B4;
  --denim-blue-quilt-2: #1E3A5A;
  --denim-blue-quilt-3: #87CEEB;
  --denim-blue-quilt-4: #708090;
  --denim-blue-quilt-5: #F0F8FF;
}

Tailwind config

theme: {
  extend: {
    colors: {
      "denim-blue-quilt": {
        1: "#4682B4",
        2: "#1E3A5A",
        3: "#87CEEB",
        4: "#708090",
        5: "#F0F8FF",
      }
    }
  }
}

Hex values

Color 1#4682B4

Color 2#1E3A5A

Color 3#87CEEB

Color 4#708090

Color 5#F0F8FF

Accessibility

Contrast checker

2.8:1Fail

2.4:1Fail

1:1Fail

3.8:1AA18

2.8:1Fail

6.7:1AA

2.9:1Fail

10.8:1AAA

2.4:1Fail

6.7:1AA

2.3:1Fail

1.6:1Fail

1:1Fail

2.9:1Fail

2.3:1Fail

3.8:1AA18

10.8:1AAA

1.6:1Fail

3.8:1AA18

Similar palettes

More like Denim Blue Quilt

Denim Blue Quilt

See it in context.

Ready when you are.

Built with Denim Blue Quilt.

How to use Denim Blue Quilt

Overview

Best used for

Suggested color roles

Accessibility notes

Recommended combinations

Faded Denim

Quilt Stitch

Classic Blue

CSS variables

Tailwind config

Related searches

Hex values

Contrast checker

More like Denim Blue Quilt