Back to palettes

Palette

Worn Denim Embrace

A cozy gradient of blues, echoing the familiar, comforting feel of well-loved denim fabric.

coolcalm5 colors
More cool palettes

Preview

See it in context.

Interface

New

Ready when you are.

A quick look at how Worn Denim Embrace 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 Worn Denim Embrace.

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

Data visualization

#4682B4#6A5ACD#87CEEB#B0C4DE#C0D2E0

Palette guide

How to use Worn Denim Embrace

Overview

The Worn Denim Embrace palette offers a cozy gradient of inviting blues, echoing the familiar, comforting feel of well-loved denim fabric. This collection features a harmonious blend of tones, from the classic #4682B4 and #6A5ACD to the lighter, airy #87CEEB and #B0C4DE, culminating in the soft #C0D2E0. Designers can leverage these hex codes to create a sense of warmth, trust, and approachability in their projects. It's particularly effective for interfaces that aim to be user-friendly and reassuring. Developers will find this palette excellent for establishing a consistent and calming visual theme across various applications, enhancing user engagement through its inviting aesthetic.

Best used for

  • Healthcare and wellness websites
  • Educational technology platforms
  • Children's learning apps
  • Non-profit organization branding
  • Casual social media interfaces
  • Home comfort product e-commerce

Suggested color roles

primary

Use #4682B4 for core elements, providing a strong yet approachable foundation.

secondary

The unique #6A5ACD adds a touch of sophistication, ideal for subheadings or distinct sections.

accent

Apply #87CEEB as a bright, friendly accent for interactive elements or key highlights.

background

The soft #C0D2E0 offers a gentle, clean background that promotes readability.

text

For body text on lighter backgrounds, #4682B4 provides excellent contrast and a calm feel.

Accessibility notes

  • Ensure #4682B4 text on #C0D2E0 background meets WCAG AA contrast standards.
  • Avoid using #B0C4DE for text on #C0D2E0, as contrast will be poor.
  • Test #87CEEB for interactive elements to ensure sufficient contrast against its surrounding colors.
  • Consider a darker blue like #4682B4 for essential text on mid-tone backgrounds.

Recommended combinations

Comfort Base

Ideal for main content areas, providing a light background with strong, readable text.

#C0D2E0 · #B0C4DE · #4682B4

Vibrant Touch

Use for sections needing a subtle, yet engaging, pop of color, like feature blocks or testimonials.

#4682B4 · #6A5ACD · #87CEEB

Soft Highlight

A clean background with primary text and a clear, friendly accent for calls to action.

#C0D2E0 · #4682B4 · #87CEEB

CSS variables

:root {
  --worn-denim-embrace-1: #4682B4;
  --worn-denim-embrace-2: #6A5ACD;
  --worn-denim-embrace-3: #87CEEB;
  --worn-denim-embrace-4: #B0C4DE;
  --worn-denim-embrace-5: #C0D2E0;
}

Tailwind config

theme: {
  extend: {
    colors: {
      "worn-denim-embrace": {
        1: "#4682B4",
        2: "#6A5ACD",
        3: "#87CEEB",
        4: "#B0C4DE",
        5: "#C0D2E0",
      }
    }
  }
}

Related searches

comforting blue color schemedenim gradient palettecalm UI blue colorsapproachable web designtextile inspired palette

Palette colors

Hex values

Color 1#4682B4
·
Color 2#6A5ACD
·
Color 3#87CEEB
·
Color 4#B0C4DE
·
Color 5#C0D2E0
·

Accessibility

Contrast checker

1
2
3
4
5
1
1.3:1Fail
2.4:1Fail
2.3:1Fail
2.6:1Fail
2
1.3:1Fail
3:1AA18
3:1Fail
3.4:1AA18
3
2.4:1Fail
3:1AA18
1:1Fail
1.1:1Fail
4
2.3:1Fail
3:1Fail
1:1Fail
1.1:1Fail
5
2.6:1Fail
3.4:1AA18
1.1:1Fail
1.1:1Fail

Similar palettes

More like Worn Denim Embrace

View all cool
Denim Blues Wash
Faded Denim Dreams
Faded Denim Patchwork
Aegean Isle Horizon
Alpine Mist
Aqua Marine Vista