Palette

Night Sky Canvas

Deep, atmospheric blues progressing to lighter, starlit shades, like a clear night sky.

darkelegant5 colors

More dark palettes

Preview

See it in context.

Interface

New

Ready when you are.

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

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

Data visualization

#0F1626#2E4057#536B8D#84A3C8#1C2B3E

Palette guide

How to use Night Sky Canvas

Overview

The Night Sky Canvas palette offers deep, atmospheric blues progressing to lighter, starlit shades, evoking the elegance of a clear night sky. It features an ultra-dark navy #0F1626, a deep steel blue #2E4057, a refined cadet blue #536B8D, a serene light steel blue #84A3C8, and a rich dark blue #1C2B3E. This collection provides designers with a sophisticated and calming foundation, perfect for conveying elegance, mystery, and depth. Developers will find these hex codes ideal for building serene app interfaces, high-end websites, or branding that requires a sense of quiet luxury and professionalism, ensuring a cohesive and visually appealing user experience.

Best used for

Luxury brand websites and apps
Astrology or celestial-themed content
Elegant editorial designs
High-end fashion or jewelry displays
Meditation and wellness applications
Night photography portfolios

Suggested color roles

primary

#0F1626 (Ultra-Dark Navy) - Ideal for main backgrounds, large content blocks, or primary navigation, providing a deep, immersive foundation.

secondary

#1C2B3E (Rich Dark Blue) - Excellent for secondary backgrounds, card elements, or prominent UI components, adding subtle depth.

accent

#84A3C8 (Serene Light Steel Blue) - Use for calls-to-action, important links, or interactive elements to provide a gentle, luminous highlight.

background

#0F1626 (Ultra-Dark Navy) - The darkest shade, providing an elegant and immersive base that allows lighter elements to shine like stars.

text

#536B8D (Refined Cadet Blue) - Suitable for subheadings or decorative text. For body text, a clean white or very light gray against #0F1626 offers optimal readability.

Accessibility notes

Ensure sufficient contrast for text, especially when using #536B8D or #84A3C8 on the darker blues, targeting WCAG AA standards.
Avoid placing adjacent dark shades like #0F1626 and #1C2B3E for small elements without clear borders to maintain distinction.
The lighter blues (#536B8D, #84A3C8) should be primarily used for text and interactive elements on the darker backgrounds.
Always test text legibility across various screen types and lighting conditions due to the subtle variations in blue.

Recommended combinations

Deep Cosmos

Creates a profound sense of depth, ideal for immersive backgrounds, elegant headers, or sophisticated branding.

#0F1626 · #1C2B3E · #2E4057

Starlit Glow

Offers a smooth, ethereal gradient effect, suitable for background elements, soft transitions, or subtle data visualizations.

#2E4057 · #536B8D · #84A3C8

Celestial Accent

Provides strong contrast for key information or calls-to-action, allowing the lightest blue to stand out elegantly against a dark base.

#0F1626 · #84A3C8 · #536B8D

CSS variables

:root {
  --night-sky-canvas-1: #0F1626;
  --night-sky-canvas-2: #2E4057;
  --night-sky-canvas-3: #536B8D;
  --night-sky-canvas-4: #84A3C8;
  --night-sky-canvas-5: #1C2B3E;
}

Tailwind config

theme: {
  extend: {
    colors: {
      "night-sky-canvas": {
        1: "#0F1626",
        2: "#2E4057",
        3: "#536B8D",
        4: "#84A3C8",
        5: "#1C2B3E",
      }
    }
  }
}

Hex values

Color 1#0F1626

Color 2#2E4057

Color 3#536B8D

Color 4#84A3C8

Color 5#1C2B3E

Accessibility

Contrast checker

1.7:1Fail

3.3:1AA18

6.9:1AA

1.3:1Fail

1.7:1Fail

1.9:1Fail

4.1:1AA18

1.4:1Fail

3.3:1AA18

1.9:1Fail

2.1:1Fail

2.6:1Fail

6.9:1AA

4.1:1AA18

2.1:1Fail

5.5:1AA

1.3:1Fail

1.4:1Fail

2.6:1Fail

5.5:1AA

Similar palettes

More like Night Sky Canvas

View all dark

Midnight Velvet Starry

Mystic Garden Bloom

Velvet Starry Night

Art Deco Sapphire

Celestial Night Garden

Cosmic Drama Scene