Palette

Sapphire Night Sky

A celestial journey from the dark, inky night to the brilliant, sparkling blues of a starlit sky.

CoolCalm5 colors

More Cool palettes

Preview

See it in context.

Interface

New

Ready when you are.

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

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

Data visualization

#051923#003554#006494#00A6FB#8ECAE6

Palette guide

How to use Sapphire Night Sky

Overview

The Sapphire Night Sky palette offers a celestial journey through deep blues, reminiscent of a starlit expanse. Starting with the profound darkness of #051923 and gradually brightening to the airy #8ECAE6, this collection is both dramatic and invigorating. Designers can utilize the vibrant #00A6FB to create energetic focal points, while the deeper tones like #003554 provide stable foundations. Developers will find this palette excellent for crafting immersive digital experiences, from sleek dashboards to dynamic landing pages. It conveys depth, clarity, and a forward-thinking aesthetic, perfect for modern and engaging projects.

Best used for

Tech startup branding and websites
Science and astronomy educational platforms
Digital marketing campaigns
Event promotion (especially night-themed)
Modern art and photography portfolios
High-performance sports apparel branding

Suggested color roles

primary

#003554 - A deep, authoritative blue that establishes a strong, professional presence. Ideal for main layouts, headers, or foundational branding.

secondary

#006494 - A mid-tone blue that offers a harmonious balance, suitable for subheadings, informational blocks, or secondary navigation.

accent

#00A6FB - A brilliant, energetic blue that commands attention. Perfect for call-to-action buttons, interactive elements, or key data highlights.

background

#051923 - The darkest shade, providing an expansive, immersive backdrop that allows brighter elements to truly pop and shine.

text

#8ECAE6 - A very light sky blue, offering excellent readability and a soft glow on dark backgrounds like #051923 or #003554.

Accessibility notes

Ensure #8ECAE6 text has sufficient contrast on all darker blues (#051923, #003554, #006494).
Avoid using #00A6FB for large blocks of text on white backgrounds; it's best as an accent.
Test button and link states (hover, focus, active) to ensure clear visual feedback for users.
For users with color vision deficiencies, ensure critical information isn't solely conveyed by color.

Recommended combinations

Celestial Contrast

Creates a striking, clear contrast for dark mode interfaces or bold headlines.

#051923 · #8ECAE6 · #003554

Dynamic Flow

Excellent for gradients, progress indicators, or layered graphical elements conveying progress.

#003554 · #006494 · #00A6FB

Vibrant Focus

Use #051923 as a background with #006494 for content and #00A6FB for impactful calls-to-action.

#051923 · #006494 · #00A6FB

CSS variables

:root {
  --sapphire-night-sky-2-1: #051923;
  --sapphire-night-sky-2-2: #003554;
  --sapphire-night-sky-2-3: #006494;
  --sapphire-night-sky-2-4: #00A6FB;
  --sapphire-night-sky-2-5: #8ECAE6;
}

Tailwind config

theme: {
  extend: {
    colors: {
      "sapphire-night-sky-2": {
        1: "#051923",
        2: "#003554",
        3: "#006494",
        4: "#00A6FB",
        5: "#8ECAE6",
      }
    }
  }
}

Hex values

Color 1#051923

Color 2#003554

Color 3#006494

Color 4#00A6FB

Color 5#8ECAE6

Accessibility

Contrast checker

1.4:1Fail

2.8:1Fail

6.7:1AA

10:1AAA

1.4:1Fail

2:1Fail

4.8:1AA

7.2:1AAA

2.8:1Fail

2:1Fail

2.4:1Fail

3.6:1AA18

6.7:1AA

4.8:1AA

2.4:1Fail

1.5:1Fail

10:1AAA

7.2:1AAA

3.6:1AA18

1.5:1Fail

Similar palettes

More like Sapphire Night Sky

View all Cool

Enchanted Riverbed

Moonlit Cypress Grove