Palette

Desert Twilight Sky

Soft, receding purples and grays evoke the peaceful transition as day turns to night in the vast desert.

coolcalm5 colors

More cool palettes

Preview

See it in context.

Interface

New

Ready when you are.

A quick look at how Desert Twilight Sky 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 Desert Twilight Sky.

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

Data visualization

#5D4D5A#8A798C#B3A4BD#D8CCEB#F2EDF7

Palette guide

How to use Desert Twilight Sky

Overview

The Desert Twilight Sky palette evokes the peaceful transition as day turns to night in the vast desert, with soft, receding purples and grays. Anchored by the deep dusky #5D4D5A, it transitions through calming purples like #8A798C and #B3A4BD, culminating in the very light #D8CCEB and #F2EDF7. This palette is an excellent choice for designers and developers aiming to convey a sense of serenity, luxury, or ethereal beauty. Its harmonious blend of cool purples and grays creates a sophisticated yet tranquil aesthetic, perfect for designs that require both modern elegance and a connection to the quiet majesty of a desert night.

Best used for

Spa and wellness brand identity
Meditation and mindfulness apps
Luxury product packaging
Creative agency branding
Celestial and mystical themes
Serene digital interfaces and apps

Suggested color roles

primary

Utilize #5D4D5A for foundational elements like main navigation, footers, or bold headlines, establishing a deep, sophisticated anchor.

secondary

Employ #8A798C for supporting roles such as subheadings, secondary buttons, or background sections, offering a muted, calming purple.

accent

Introduce #B3A4BD as a lighter, soft lavender accent for highlights, small icons, or decorative details, providing gentle charm.

background

Apply #F2EDF7 to main content areas or large backgrounds, creating a clean, airy, and highly readable canvas.

text

For optimal readability, use #5D4D5A or a dark charcoal/black against lighter backgrounds such as #F2EDF7 or #D8CCEB.

Accessibility notes

Ensure sufficient contrast for text on #F2EDF7 and #D8CCEB; dark text is always recommended.
Verify that #B3A4BD provides enough contrast if used for critical UI elements against adjacent lighter colors.
Avoid placing light-colored text on mid-tone purples like #8A798C to prevent readability issues.
Use a contrast checker to confirm WCAG AA compliance for all text and interactive elements within this cool palette.

Recommended combinations

Twilight Foundation

Perfect for a strong primary color on a very light background with a muted secondary, excellent for calm branding.

#5D4D5A · #F2EDF7 · #8A798C

Serene Layers

Ideal for creating layered backgrounds or subtle graphic elements, providing depth and a coherent ethereal feel.

#8A798C · #B3A4BD · #D8CCEB

Sky Contrast

Use the lightest color as a background with the darkest as text, and a soft lavender for accents, ensuring clarity and serenity.

#F2EDF7 · #5D4D5A · #B3A4BD

CSS variables

:root {
  --desert-twilight-sky-1: #5D4D5A;
  --desert-twilight-sky-2: #8A798C;
  --desert-twilight-sky-3: #B3A4BD;
  --desert-twilight-sky-4: #D8CCEB;
  --desert-twilight-sky-5: #F2EDF7;
}

Tailwind config

theme: {
  extend: {
    colors: {
      "desert-twilight-sky": {
        1: "#5D4D5A",
        2: "#8A798C",
        3: "#B3A4BD",
        4: "#D8CCEB",
        5: "#F2EDF7",
      }
    }
  }
}

Hex values

Color 1#5D4D5A

Color 2#8A798C

Color 3#B3A4BD

Color 4#D8CCEB

Color 5#F2EDF7

Accessibility

Contrast checker

1.9:1Fail

3.4:1AA18

5.1:1AA

6.8:1AA

1.9:1Fail

1.7:1Fail

2.6:1Fail

3.5:1AA18

3.4:1AA18

1.7:1Fail

1.5:1Fail

2:1Fail

5.1:1AA

2.6:1Fail

1.5:1Fail

1.3:1Fail

6.8:1AA

3.5:1AA18

2:1Fail

1.3:1Fail

Similar palettes

More like Desert Twilight Sky

View all cool

Sapphire Desert Bloom

Celestial Ocean Dream