Back to palettes

Palette

Lavender Haze Dusk

A tranquil blend of dusky purples and grays, like a lavender field at twilight.

coolcalm5 colors
More cool palettes

Preview

See it in context.

Interface

New

Ready when you are.

A quick look at how Lavender Haze Dusk 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 Lavender Haze Dusk.

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

Data visualization

#4E4A5E#7B6888#9A80A6#C7B4CC#DEDCE0

Palette guide

How to use Lavender Haze Dusk

Overview

The "Lavender Haze Dusk" palette offers a tranquil and sophisticated blend of dusky purples and grays, perfectly capturing the essence of a lavender field at twilight. It features the deep, grounding #4E4A5E, transitioning through the rich #7B6888 and the elegant #9A80A6. These are beautifully complemented by the softer #C7B4CC and the very light, almost silver #DEDCE0. This collection is ideal for designers and developers seeking to create a sense of calm, understated luxury, and subtle sophistication. It's particularly effective for projects requiring a soothing yet visually engaging aesthetic, from digital interfaces to elegant print materials.

Best used for

  • Luxury brand identity for high-end services
  • Evening wear or formal fashion e-commerce
  • Interior design for serene spaces
  • Premium stationery and invitation design
  • Art gallery or museum website UI
  • Sophisticated editorial layouts

Suggested color roles

primary

#7B6888 - A rich, inviting purple-gray suitable for main content areas, prominent buttons, and key interactive elements.

secondary

#9A80A6 - Use for secondary actions, subheadings, or to add a touch more depth and formality without overpowering.

accent

#4E4A5E - A deep, grounding purple-gray perfect for impactful calls-to-action, important icons, or luxurious detailing.

background

#DEDCE0 - A very light, almost silver-gray providing a clean, airy base that allows other colors to shine.

text

#4E4A5E - An excellent choice for body text and headings, offering strong readability and a sophisticated feel against light backgrounds.

Accessibility notes

  • Ensure sufficient contrast for #C7B4CC when used on #DEDCE0; it may require larger text.
  • #4E4A5E and #7B6888 provide excellent contrast on #DEDCE0, making them ideal for primary text.
  • Avoid using #C7B4CC as text color on #DEDCE0 for critical information due to low contrast.
  • Test color combinations for readability under various lighting conditions and screen types, especially for users with low vision.

Recommended combinations

Dusky Base

Creates a soft, layered background effect for a gentle, sophisticated presence.

#DEDCE0 · #C7B4CC · #9A80A6

Twilight Contrast

Provides strong hierarchy for headers, navigation, and impactful brand elements.

#DEDCE0 · #7B6888 · #4E4A5E

Subtle Gradient

Use for delicate patterns, illustrations, or gradient effects with smooth transitions.

#9A80A6 · #7B6888 · #C7B4CC

CSS variables

:root {
  --lavender-haze-dusk-1: #4E4A5E;
  --lavender-haze-dusk-2: #7B6888;
  --lavender-haze-dusk-3: #9A80A6;
  --lavender-haze-dusk-4: #C7B4CC;
  --lavender-haze-dusk-5: #DEDCE0;
}

Tailwind config

theme: {
  extend: {
    colors: {
      "lavender-haze-dusk": {
        1: "#4E4A5E",
        2: "#7B6888",
        3: "#9A80A6",
        4: "#C7B4CC",
        5: "#DEDCE0",
      }
    }
  }
}

Related searches

dusky lavender color schemetwilight purple gray palettecalm sophisticated colorsmuted cool tone designelegant UI color ideas

Palette colors

Hex values

Color 1#4E4A5E
·
Color 2#7B6888
·
Color 3#9A80A6
·
Color 4#C7B4CC
·
Color 5#DEDCE0
·

Accessibility

Contrast checker

1
2
3
4
5
1
1.7:1Fail
2.4:1Fail
4.4:1AA18
6.3:1AA
2
1.7:1Fail
1.4:1Fail
2.6:1Fail
3.7:1AA18
3
2.4:1Fail
1.4:1Fail
1.8:1Fail
2.6:1Fail
4
4.4:1AA18
2.6:1Fail
1.8:1Fail
1.4:1Fail
5
6.3:1AA
3.7:1AA18
2.6:1Fail
1.4:1Fail

Similar palettes

More like Lavender Haze Dusk

View all cool