Back to palettes

Palette

Desert Night Sky

Cool, deep blues and grays evoke the vast, tranquil expanse of a star-filled desert night.

coolcalm5 colors
More cool palettes

Preview

See it in context.

Interface

New

Ready when you are.

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

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

Data visualization

#0A1B2E#2B3D50#5B7A99#8EADC6#BFD9EA

Palette guide

How to use Desert Night Sky

Overview

The "Desert Night Sky" palette features cool, deep blues and grays that evoke the vast, tranquil expanse of a star-filled desert night. Ranging from the darkest blue #0A1B2E to the airy light blue #BFD9EA, this collection includes the solid #2B3D50, the versatile #5B7A99, and the serene #8EADC6. This palette is perfect for designs aiming to convey calm, stability, and sophistication. Its serene quality makes it highly adaptable for web interfaces, educational materials, or branding that seeks a peaceful yet profound aesthetic, offering a harmonious blend of depth and clarity.

Best used for

  • Serene web design and UI/UX
  • Educational content and e-learning platforms
  • Mental wellness and meditation apps
  • Travel branding for tranquil destinations
  • Sophisticated tech company websites
  • Astronomy or scientific visualization

Suggested color roles

primary

Use #2B3D50 as a solid foundation for main content areas or significant brand elements, conveying stability and depth.

secondary

Employ #5B7A99 for supporting elements, subheadings, or secondary backgrounds, adding a versatile mid-tone.

accent

Reserve #BFD9EA for bright highlights, calls-to-action, or text on dark backgrounds, representing starlight or clarity.

background

Utilize #0A1B2E as the darkest blue background, creating an expansive and tranquil canvas for content.

text

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

Accessibility notes

  • #BFD9EA provides excellent contrast for text on #0A1B2E and #2B3D50, ensuring high readability.
  • Avoid using #8EADC6 on #5B7A99 for text due to insufficient contrast; reserve it for larger decorative elements.
  • Always use #BFD9EA or white for body text on the darker shades to meet accessibility standards.
  • Ensure interactive elements are clearly visible and distinguishable, potentially using #BFD9EA as a key accent color.

Recommended combinations

Celestial Calm

Creates a peaceful, expansive composition, ideal for hero sections or backgrounds that evoke a sense of wonder.

#0A1B2E · #5B7A99 · #BFD9EA

Twilight Gradient

A smooth, atmospheric blend, excellent for layered interfaces or sections that depict a gradual transition.

#2B3D50 · #8EADC6 · #BFD9EA

Deep Serenity

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

#5B7A99 · #0A1B2E · #8EADC6

CSS variables

:root {
  --desert-night-sky-1: #0A1B2E;
  --desert-night-sky-2: #2B3D50;
  --desert-night-sky-3: #5B7A99;
  --desert-night-sky-4: #8EADC6;
  --desert-night-sky-5: #BFD9EA;
}

Tailwind config

theme: {
  extend: {
    colors: {
      "desert-night-sky": {
        1: "#0A1B2E",
        2: "#2B3D50",
        3: "#5B7A99",
        4: "#8EADC6",
        5: "#BFD9EA",
      }
    }
  }
}

Related searches

cool blue gray color palettetranquil night themeexpansive blue design colorsdesert night brandingserene UI palette

Palette colors

Hex values

Color 1#0A1B2E
·
Color 2#2B3D50
·
Color 3#5B7A99
·
Color 4#8EADC6
·
Color 5#BFD9EA
·

Accessibility

Contrast checker

1
2
3
4
5
1
1.6:1Fail
3.9:1AA18
7.4:1AAA
11.9:1AAA
2
1.6:1Fail
2.5:1Fail
4.7:1AA
7.6:1AAA
3
3.9:1AA18
2.5:1Fail
1.9:1Fail
3.1:1AA18
4
7.4:1AAA
4.7:1AA
1.9:1Fail
1.6:1Fail
5
11.9:1AAA
7.6:1AAA
3.1:1AA18
1.6:1Fail

Similar palettes

More like Desert Night Sky

View all cool