Back to palettes

Palette

Starry Night Canvas

Deep, mysterious blues that capture the infinite expanse of a moonless, star-filled night sky.

darkdark5 colors
More dark palettes

Preview

See it in context.

Interface

New

Ready when you are.

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

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

Data visualization

#000C24#0B1A3F#2B4162#516A8C#859BB5

Palette guide

How to use Starry Night Canvas

Overview

The "Starry Night Canvas" palette (version 2) plunges into the profound depths of a moonless, star-filled night sky. It begins with the nearly black #000C24, transitioning through intense, deep blues like #0B1A3F and #2B4162. The palette then gracefully lightens to the atmospheric #516A8C and culminates in the ethereal #859BB5, reminiscent of distant starlight or hazy nebulae. This collection is ideal for designers crafting immersive, mysterious, and sophisticated digital experiences. Developers can leverage these hex codes for elegant dark mode interfaces, space-themed applications, or branding that emphasizes depth, tranquility, and the infinite wonder of the cosmos.

Best used for

  • Aerospace and scientific websites
  • Sci-fi game environments and UIs
  • Elegant dark mode web and app designs
  • Abstract digital art and visualizations
  • Luxury automotive or tech branding
  • Theatrical or cinematic mood setting

Suggested color roles

primary

#000C24 - The deepest, almost black navy. Ideal for main backgrounds, headers, or large content blocks, setting a profound, mysterious tone.

secondary

#0B1A3F - A very deep, rich blue. Excellent for secondary panels, content cards, or navigation bars, adding structure and depth.

accent

#516A8C - A muted, mid-tone blue. Use for interactive elements, subtle highlights, or call-to-action buttons to provide a gentle contrast.

background

#2B4162 - A versatile deep blue that serves as a robust yet atmospheric background for most content.

text

#859BB5 - A light, soft blue-gray. Perfect for primary body text on darker backgrounds like #000C24 or #0B1A3F, ensuring good readability and a celestial feel.

Accessibility notes

  • #859BB5 offers good contrast for body text against the darkest shades #000C24 and #0B1A3F.
  • Be cautious when using #2B4162 or #516A8C for small text on other dark palette colors; always verify WCAG compliance.
  • Ensure interactive elements have clear visual states, as some color differences are subtle within the darker range.
  • For critical UI elements or very small text, a pure white or very light gray (#F8F8F8) might be necessary on the darkest backgrounds.

Recommended combinations

Abyss Layers

Creates a profound, layered dark background effect, ideal for immersive digital environments or space themes.

#000C24 · #0B1A3F · #2B4162

Cosmic Glimmer

Provides a clear visual hierarchy with lighter tones against a deep blue base, suitable for navigation or data displays.

#0B1A3F · #516A8C · #859BB5

Deep Tranquility

Combines the deepest blue with a mid-tone and a light, ethereal shade for a balanced, calming composition.

#000C24 · #2B4162 · #859BB5

CSS variables

:root {
  --starry-night-canvas-2-1: #000C24;
  --starry-night-canvas-2-2: #0B1A3F;
  --starry-night-canvas-2-3: #2B4162;
  --starry-night-canvas-2-4: #516A8C;
  --starry-night-canvas-2-5: #859BB5;
}

Tailwind config

theme: {
  extend: {
    colors: {
      "starry-night-canvas-2": {
        1: "#000C24",
        2: "#0B1A3F",
        3: "#2B4162",
        4: "#516A8C",
        5: "#859BB5",
      }
    }
  }
}

Related searches

deep navy color schemecosmic blue dark palettemoonless night ui colorsmysterious blue gradientdark space theme

Palette colors

Hex values

Color 1#000C24
·
Color 2#0B1A3F
·
Color 3#2B4162
·
Color 4#516A8C
·
Color 5#859BB5
·

Accessibility

Contrast checker

1
2
3
4
5
1
1.1:1Fail
1.9:1Fail
3.5:1AA18
6.8:1AA
2
1.1:1Fail
1.6:1Fail
3.1:1AA18
6:1AA
3
1.9:1Fail
1.6:1Fail
1.9:1Fail
3.6:1AA18
4
3.5:1AA18
3.1:1AA18
1.9:1Fail
1.9:1Fail
5
6.8:1AA
6:1AA
3.6:1AA18
1.9:1Fail

Similar palettes

More like Starry Night Canvas

View all dark
Midnight Star Veil
Midnight Stellar Glow
Celestial Abyss Gaze
Celestial Night Sky
Celestial Ocean Depth
Cosmic Starlight Gaze