Back to palettes

Palette

Night Sky Whisper

Deep blues and grays evoke the vast, awe-inspiring beauty of a starlit night sky.

darkdark5 colors
More dark palettes

Preview

See it in context.

Interface

New

Ready when you are.

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

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

Data visualization

#0A0A0F#1C263B#3B4A6B#6D82A5#A2B9CE

Palette guide

How to use Night Sky Whisper

Overview

The Night Sky Whisper palette offers a sophisticated journey into deep blues and muted grays, perfectly capturing the serene mystery of a starlit night. Anchored by the near-black #0A0A0F and the rich dark blue #1C263B, this collection provides a strong foundation for elegant, immersive designs. Mid-tones like #3B4A6B and #6D82A5 add depth and visual interest, while the soft, airy #A2B9CE introduces a subtle highlight, reminiscent of distant stars or moonlight. Ideal for creating a calm yet powerful aesthetic, this palette is versatile for both digital interfaces and branding that seeks a refined, contemplative mood.

Best used for

  • Luxury brand websites and apps
  • High-tech product interfaces
  • Meditation or wellness applications
  • Night mode UI themes
  • Elegant editorial designs
  • Corporate branding with a sophisticated edge

Suggested color roles

primary

#1C263B - A deep, authoritative blue, excellent for main headings, primary CTAs, or brand identity. It's dark enough to feel substantial but lighter than the background.

secondary

#3B4A6B - A versatile mid-tone blue-gray, perfect for secondary elements, subheadings, or active states that need to stand out against the primary.

accent

#A2B9CE - A soft, cool light blue, best used sparingly for subtle highlights, interactive elements, or key details that require a gentle pop on dark backgrounds.

background

#0A0A0F - The deepest, near-black shade, ideal for immersive dark mode backgrounds, creating a vast, infinite canvas for content.

text

#A2B9CE - A light, readable color for primary body text on dark backgrounds like #0A0A0F or #1C263B, ensuring excellent contrast and a gentle appearance.

Accessibility notes

  • Ensure #A2B9CE text on #0A0A0F or #1C263B backgrounds meets WCAG AA or AAA contrast standards for readability.
  • Use #6D82A5 or #3B4A6B for secondary text on the darkest backgrounds, but verify contrast carefully.
  • Avoid using #0A0A0F or #1C263B as text colors on similarly dark backgrounds as contrast will be insufficient.
  • For interactive elements, ensure sufficient color contrast for states (e.g., hover, focus) even within the dark palette.

Recommended combinations

Starry Night Text

Ideal for dark mode interfaces where #0A0A0F is the background, #A2B9CE is primary text, and #6D82A5 provides secondary information or links.

#0A0A0F · #A2B9CE · #6D82A5

Deep Horizon Accent

Use #1C263B as a card or section background, #3B4A6B for titles, and #A2B9CE for subtle interactive elements or icons to draw attention.

#1C263B · #3B4A6B · #A2B9CE

Subtle Gradient

Effective for creating depth in UI elements like progress bars, layered cards, or subtle background gradients for a sophisticated, non-flat look.

#1C263B · #3B4A6B · #6D82A5

CSS variables

:root {
  --night-sky-whisper-1: #0A0A0F;
  --night-sky-whisper-2: #1C263B;
  --night-sky-whisper-3: #3B4A6B;
  --night-sky-whisper-4: #6D82A5;
  --night-sky-whisper-5: #A2B9CE;
}

Tailwind config

theme: {
  extend: {
    colors: {
      "night-sky-whisper": {
        1: "#0A0A0F",
        2: "#1C263B",
        3: "#3B4A6B",
        4: "#6D82A5",
        5: "#A2B9CE",
      }
    }
  }
}

Related searches

deep blue color palettedark mode UI colorscelestial design palettemysterious web colorselegant blue gray scheme

Palette colors

Hex values

Color 1#0A0A0F
·
Color 2#1C263B
·
Color 3#3B4A6B
·
Color 4#6D82A5
·
Color 5#A2B9CE
·

Accessibility

Contrast checker

1
2
3
4
5
1
1.3:1Fail
2.2:1Fail
5.1:1AA
9.8:1AAA
2
1.3:1Fail
1.7:1Fail
3.9:1AA18
7.5:1AAA
3
2.2:1Fail
1.7:1Fail
2.3:1Fail
4.4:1AA18
4
5.1:1AA
3.9:1AA18
2.3:1Fail
1.9:1Fail
5
9.8:1AAA
7.5:1AAA
4.4:1AA18
1.9:1Fail

Similar palettes

More like Night Sky Whisper

View all dark