Palette

Lavender Sky Dusk

Gentle, dreamy hues of a sunset sky, where lavender clouds meet fading light, bringing tranquility.

pastelcalm5 colors

More pastel palettes

Preview

See it in context.

Interface

New

Ready when you are.

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

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

Data visualization

#E6E6FA#B0C4DE#D8BFD8#FAEBD7#AFEEEE

Palette guide

How to use Lavender Sky Dusk

Overview

The "Lavender Sky Dusk" palette is a beautifully blended collection of soft pastels, capturing the serene and dreamy hues of a sunset sky. Featuring the delicate #E6E6FA, the soothing #B0C4DE, and the warm #FAEBD7, alongside the gentle #D8BFD8 and the subtle #AFEEEE, this palette offers a unique mix of purples, blues, and a touch of warmth. It's ideal for designs that aim to convey tranquility, natural beauty, and a welcoming atmosphere. Designers can leverage these shades to create soft, inviting interfaces, comforting branding, or evocative digital content that promotes a sense of peace and calm.

Best used for

Spa and wellness retreats
Nature-inspired photography
Gentle children's storybook illustrations
Home decor and lifestyle blogs
Serene meditation apps
E-commerce for artisanal goods

Suggested color roles

primary

#B0C4DE - A calming light blue-grey, excellent for main sections, headers, or backgrounds where a sense of stability is desired.

secondary

#D8BFD8 - A gentle, muted lavender, ideal for subheadings, secondary navigation, or supporting graphics, adding a soft touch.

accent

#AFEEEE - A subtle light blue-green, useful for delicate highlights, subtle interactive elements, or graphic accents to introduce a refreshing feel.

background

#E6E6FA - A very light, almost white lavender, providing a clean, expansive, and calming backdrop that enhances readability.

text

#B0C4DE - This light blue-grey can work for headings, but for body text, a darker neutral like #4A4A4A on #E6E6FA or #FAEBD7 is recommended.

Accessibility notes

Text in #B0C4DE or #D8BFD8 on #E6E6FA or #FAEBD7 may require sufficient font size or bolding for readability.
Use darker text (e.g., black or dark grey) for main body content on #E6E6FA or #FAEBD7 to ensure WCAG AA compliance.
Avoid low contrast combinations like #AFEEEE text on #E6E6FA backgrounds.
Ensure interactive elements using #AFEEEE have clear visual indicators beyond color alone.

Recommended combinations

Sunset Hues

Creates a soft, warm background or header area, evoking a gentle sunset glow.

#E6E6FA · #D8BFD8 · #FAEBD7

Calm Skies

Ideal for illustrating natural themes, subtle graphic elements, or layered UI components with a cool, airy feel.

#E6E6FA · #B0C4DE · #AFEEEE

Gentle Contrast

Effective for body text and navigation, ensuring readability with a soft, harmonious aesthetic.

#FAEBD7 · #D8BFD8 · #B0C4DE

CSS variables

:root {
  --lavender-sky-dusk-1: #E6E6FA;
  --lavender-sky-dusk-2: #B0C4DE;
  --lavender-sky-dusk-3: #D8BFD8;
  --lavender-sky-dusk-4: #FAEBD7;
  --lavender-sky-dusk-5: #AFEEEE;
}

Tailwind config

theme: {
  extend: {
    colors: {
      "lavender-sky-dusk": {
        1: "#E6E6FA",
        2: "#B0C4DE",
        3: "#D8BFD8",
        4: "#FAEBD7",
        5: "#AFEEEE",
      }
    }
  }
}

Hex values

Color 1#E6E6FA

Color 2#B0C4DE

Color 3#D8BFD8

Color 4#FAEBD7

Color 5#AFEEEE

Accessibility

Contrast checker

1.4:1Fail

1.1:1Fail

1:1Fail

1.4:1Fail

1:1Fail

1.5:1Fail

1.4:1Fail

1:1Fail

1.5:1Fail

1.3:1Fail

1.1:1Fail

1.5:1Fail

1.1:1Fail

1:1Fail

1.4:1Fail

1.3:1Fail

1.1:1Fail

Similar palettes

More like Lavender Sky Dusk

Lavender Sky Dusk

See it in context.

Ready when you are.

Built with Lavender Sky Dusk.

How to use Lavender Sky Dusk

Overview

Best used for

Suggested color roles

Accessibility notes

Recommended combinations

Sunset Hues

Calm Skies

Gentle Contrast

CSS variables

Tailwind config

Related searches

Hex values

Contrast checker

More like Lavender Sky Dusk