Palette

Celestial Aurora Whisper

The subtle, shifting blues of a distant aurora, whispering secrets across the night sky.

coolcalm5 colors

More cool palettes

Preview

See it in context.

Interface

New

Ready when you are.

A quick look at how Celestial Aurora 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 Celestial Aurora Whisper.

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

Data visualization

#0A0A2A#1C2C54#305A80#4A8CAF#6AD0FF

Palette guide

How to use Celestial Aurora Whisper

Overview

The Celestial Aurora Whisper palette captures the subtle, shifting blues of a distant aurora, whispering secrets across the night sky. This cool-toned collection builds from a profound, near-black #0A0A2A, through a deep navy #1C2C54, and a rich blue #305A80. Lighter, ethereal blues #4A8CAF and the vibrant #6AD0FF provide a soft, atmospheric glow. This palette is highly useful for designers and developers aiming for a sophisticated, tranquil, and slightly mysterious aesthetic. It's perfect for conveying depth, calm, and a touch of understated elegance in digital interfaces, branding, and editorial designs.

Best used for

Calm and serene website backgrounds
Luxury brand identities (e.g., high-end tech)
Digital art with a celestial theme
Meditation or sleep aid applications
Corporate branding seeking a trustworthy feel
Elegant editorial layouts

Suggested color roles

primary

#0A0A2A - A very deep, almost black, ideal for expansive backgrounds, headers, or main structural elements, providing a strong, elegant foundation.

secondary

#1C2C54 - Use for subheadings, navigation bars, or darker content panels, offering a rich navy that adds depth without starkness.

accent

#6AD0FF - A bright, clear sky blue, perfect for call-to-action buttons, interactive elements, or subtle highlights that need to stand out.

background

#6AD0FF - Can serve as a lighter, airy background for specific sections, or use a very light off-white with the darker blues for text.

text

#0A0A2A - Provides excellent readability on lighter backgrounds (e.g., a pure white or very light gray), ensuring legibility and maintaining the cool tone.

Accessibility notes

Ensure #0A0A2A text on a light background (like a near-white) meets WCAG AAA contrast.
#4A8CAF text on #6AD0FF will likely have insufficient contrast; avoid for critical information.
For dark mode, use white or #6AD0FF text on #0A0A2A or #1C2C54 backgrounds.
Use #305A80 as text on #6AD0FF for headings if contrast is sufficient; otherwise, use a darker blue.

Recommended combinations

Deepest Night

Deepest blue for base, mid-blue for content, and vibrant blue for accents.

#0A0A2A · #305A80 · #6AD0FF

Ethereal Glimmer

Rich navy for main elements, a brighter blue for highlights, and a deep anchor.

#1C2C54 · #4A8CAF · #0A0A2A

Aurora Veil

Strong dark background with shimmering light blues for ethereal details and text.

#0A0A2A · #4A8CAF · #6AD0FF

CSS variables

:root {
  --celestial-aurora-whisper-1: #0A0A2A;
  --celestial-aurora-whisper-2: #1C2C54;
  --celestial-aurora-whisper-3: #305A80;
  --celestial-aurora-whisper-4: #4A8CAF;
  --celestial-aurora-whisper-5: #6AD0FF;
}

Tailwind config

theme: {
  extend: {
    colors: {
      "celestial-aurora-whisper": {
        1: "#0A0A2A",
        2: "#1C2C54",
        3: "#305A80",
        4: "#4A8CAF",
        5: "#6AD0FF",
      }
    }
  }
}

Hex values

Color 1#0A0A2A

Color 2#1C2C54

Color 3#305A80

Color 4#4A8CAF

Color 5#6AD0FF

Accessibility

Contrast checker

1.4:1Fail

2.7:1Fail

5.2:1AA

11.1:1AAA

1.4:1Fail

1.9:1Fail

3.7:1AA18

7.9:1AAA

2.7:1Fail

1.9:1Fail

2:1Fail

4.2:1AA18

5.2:1AA

3.7:1AA18

2:1Fail

2.1:1Fail

11.1:1AAA

7.9:1AAA

4.2:1AA18

2.1:1Fail

Similar palettes

More like Celestial Aurora Whisper

View all cool

Celestial Aurora Dream

Stardust Nebula Bloom