Palette

Desert Night Stardust

The tranquil yet profound beauty of a desert night, with deep skies and a glimmer of starlight.

coolcalm5 colors

More cool palettes

Preview

See it in context.

Interface

New

Ready when you are.

A quick look at how Desert Night Stardust 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 Night Stardust.

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

Data visualization

#202E3E#3B2E4E#4C3F6B#C2C7B8#F7F8FA

Palette guide

How to use Desert Night Stardust

Overview

The "Desert Night Stardust" palette captures the tranquil yet profound beauty of a desert night, with deep skies and a glimmer of starlight. This collection features rich, cool tones from the darkest blue #202E3E to profound purples like #3B2E4E and #4C3F6B. These are beautifully contrasted by a soft, almost ethereal greenish-gray #C2C7B8 and a near-white #F7F8FA. This palette is designed for projects that seek a mystical, calming, and sophisticated aesthetic. It's perfect for artistic web design, luxury products, or any application that benefits from a blend of deep mystery and gentle illumination.

Best used for

Artistic website and digital media design
Luxury product branding and packaging
Mystical or spiritual-themed projects
Meditation and mindfulness applications
High-end event or gala branding
Photography portfolios showcasing cosmic themes

Suggested color roles

primary

Use #3B2E4E as a deep purple-blue main tone, ideal for prominent sections or brand identity, conveying mystery and depth.

secondary

Employ #4C3F6B for supporting elements, subheadings, or graphical accents, adding a rich, sophisticated layer.

accent

Reserve #C2C7B8 for subtle glows, delicate icons, or secondary text on dark backgrounds, mimicking soft starlight.

background

Utilize #202E3E as a very dark blue background, creating an immersive and expansive canvas for content.

text

For optimal readability on dark backgrounds, use #F7F8FA or a crisp white. For lighter elements, a deep charcoal is effective.

Accessibility notes

#F7F8FA offers excellent contrast for text on #202E3E, #3B2E4E, and #4C3F6B, ensuring high readability.
Avoid using #C2C7B8 on #F7F8FA for small text due to potential low contrast; reserve it for larger headings or decorative elements.
Always use #F7F8FA or white for body text on the darker colors to meet accessibility standards.
Ensure interactive elements are clearly distinguishable against their backgrounds, potentially using #F7F8FA for key accents.

Recommended combinations

Galactic Hues

Creates a deep, cosmic composition, ideal for hero sections or backgrounds that evoke a sense of vastness.

#202E3E · #3B2E4E · #F7F8FA

Starlight Glow

A mystical and ethereal blend, excellent for intros or sections that hint at subtle illumination and wonder.

#4C3F6B · #C2C7B8 · #F7F8FA

Tranquil Cosmos

Offers a balanced and serene feel, suitable for content blocks or visual elements requiring depth and calm.

#3B2E4E · #202E3E · #C2C7B8

CSS variables

:root {
  --desert-night-stardust-1: #202E3E;
  --desert-night-stardust-2: #3B2E4E;
  --desert-night-stardust-3: #4C3F6B;
  --desert-night-stardust-4: #C2C7B8;
  --desert-night-stardust-5: #F7F8FA;
}

Tailwind config

theme: {
  extend: {
    colors: {
      "desert-night-stardust": {
        1: "#202E3E",
        2: "#3B2E4E",
        3: "#4C3F6B",
        4: "#C2C7B8",
        5: "#F7F8FA",
      }
    }
  }
}

Hex values

Color 1#202E3E

Color 2#3B2E4E

Color 3#4C3F6B

Color 4#C2C7B8

Color 5#F7F8FA

Accessibility

Contrast checker

1.1:1Fail

1.5:1Fail

8:1AAA

13:1AAA

1.1:1Fail

1.3:1Fail

7.2:1AAA

11.7:1AAA

1.5:1Fail

1.3:1Fail

5.4:1AA

8.9:1AAA