Palette

Starry Night Azure

A tranquil blend of deep blues and lighter tones, reminiscent of a vast, star-filled night sky transitioning to dawn.

coolcalm5 colors

More cool palettes

Preview

See it in context.

Interface

New

Ready when you are.

A quick look at how Starry Night Azure 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 Starry Night Azure.

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

Data visualization

#0A0F2B#2C3E50#5B7A9A#8FB5CE#C9D9E8

Palette guide

How to use Starry Night Azure

Overview

The "Starry Night Azure" palette offers a tranquil and expansive journey from deep night to the soft glow of dawn. It begins with the profound #0A0F2B, a dark navy, smoothly transitioning through rich blues like #2C3E50 and #5B7A9A. The palette brightens considerably with the airy #8FB5CE and culminates in the ethereal #C9D9E8, a near-white sky blue. This collection is perfect for designers aiming to evoke calmness, clarity, and the serene beauty of a vast sky. Developers can utilize these hex codes for refreshing app interfaces, soothing websites, or branding that emphasizes tranquility, openness, and a touch of celestial wonder, offering excellent versatility for light and dark elements.

Best used for

Calm and meditative apps
Travel and nature photography websites
Educational content about space or astronomy
Branding for wellness or spa services
Clean and modern web interfaces
Digital art depicting skies or oceans

Suggested color roles

primary

#0A0F2B - The deepest navy, ideal for main backgrounds, headers, or large sections, establishing a sense of profound depth.

secondary

#2C3E50 - A rich, deep slate blue. Excellent for secondary panels, content cards, or navigation bars, providing structure.

accent

#8FB5CE - A vibrant, light azure. Use for interactive elements, call-to-action buttons, or key highlights to draw attention and add a fresh pop.

background

#5B7A9A - A versatile mid-tone blue, suitable for general backgrounds where a softer, yet still cool, base is desired.

text

#C9D9E8 - A very light sky blue. Perfect for primary body text on darker backgrounds (#0A0F2B, #2C3E50) for optimal readability and a serene feel.

Accessibility notes

#C9D9E8 provides excellent contrast against #0A0F2B and #2C3E50 for body text.
#8FB5CE offers good contrast for interactive elements on darker blues.
Be cautious when using #5B7A9A or #8FB5CE for small text on #C9D9E8; contrast will be insufficient.
Ensure sufficient contrast for button states, especially when using adjacent shades within the mid-range.

Recommended combinations

Night to Dawn

Creates a smooth, atmospheric transition from deep night to soft morning light, ideal for gradients.

#0A0F2B · #5B7A9A · #C9D9E8

Azure Highlights

Uses the lighter blues for clear text and interactive elements against a deep blue base.

#2C3E50 · #8FB5CE · #C9D9E8

Deep Serenity

Establishes a profound, calming base with subtle shifts in deep blue, suitable for background layers.

#0A0F2B · #2C3E50 · #5B7A9A

CSS variables

:root {
  --starry-night-azure-1: #0A0F2B;
  --starry-night-azure-2: #2C3E50;
  --starry-night-azure-3: #5B7A9A;
  --starry-night-azure-4: #8FB5CE;
  --starry-night-azure-5: #C9D9E8;
}

Tailwind config

theme: {
  extend: {
    colors: {
      "starry-night-azure": {
        1: "#0A0F2B",
        2: "#2C3E50",
        3: "#5B7A9A",
        4: "#8FB5CE",
        5: "#C9D9E8",
      }
    }
  }
}

Hex values

Color 1#0A0F2B

Color 2#2C3E50

Color 3#5B7A9A

Color 4#8FB5CE

Color 5#C9D9E8

Accessibility

Contrast checker

1.7:1Fail

4.2:1AA18

8.7:1AAA

13.1:1AAA

1.7:1Fail

2.5:1Fail

5.1:1AA

7.6:1AAA

4.2:1AA18

2.5:1Fail

2.1:1Fail

3.1:1AA18

8.7:1AAA

5.1:1AA

2.1:1Fail

1.5:1Fail

13.1:1AAA

7.6:1AAA

3.1:1AA18

1.5:1Fail

Similar palettes

More like Starry Night Azure

View all cool

Starry Night Horizon

Celestial Aurora Whisper

Indigo Dusk Dream

Sapphire Sky Gaze

Stardust Nebula Bloom

Starlight Sapphire