Back to palettes

Palette

Starry Night Canvas

Deep blues and celestial purples paint a vivid picture of a mysterious, 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

#0A0A2A#2C2C5E#5D5D99#8C8CCB#BCCCEA

Palette guide

How to use Starry Night Canvas

Overview

The "Starry Night Canvas" palette captures the vivid and mysterious beauty of a star-filled night sky, blending deep blues with celestial purples. It begins with the profound #0A0A2A, a very dark indigo, and gracefully transitions through rich, deep purples like #2C2C5E and #5D5D99. The palette brightens considerably with the ethereal #8C8CCB and culminates in the soft, luminous #BCCCEA, reminiscent of distant starlight. This collection is ideal for designers creating immersive digital experiences, elegant branding, or serene interfaces that evoke wonder and tranquility. Developers can employ these hex codes to craft sophisticated dark mode themes, space-themed applications, or artistic visualizations with a harmonious blend of cool, cosmic tones.

Best used for

  • Astronomical websites or apps
  • Sci-fi game interfaces and concept art
  • Meditative or relaxation app UIs
  • Elegant dark mode web designs
  • Branding for technology or innovation
  • Digital art depicting night skies

Suggested color roles

primary

#0A0A2A - The deepest, darkest indigo-purple. Perfect for main backgrounds, large headers, or hero sections, providing an immersive sense of night.

secondary

#2C2C5E - A rich, deep blue-purple. Excellent for secondary panels, content cards, or navigation bars, adding structure and depth.

accent

#8C8CCB - A medium, soft lavender-blue. Use for interactive elements, highlights, or call-to-action buttons, offering a gentle yet discernible contrast.

background

#2C2C5E - A versatile deep blue-purple that serves as a rich, yet not overwhelming, background for most content.

text

#BCCCEA - A very light, ethereal blue-purple. Ideal for primary body text on darker backgrounds like #0A0A2A or #2C2C5E, ensuring good readability and a celestial feel.

Accessibility notes

  • #BCCCEA provides excellent contrast for body text against #0A0A2A and #2C2C5E.
  • Be cautious when using #5D5D99 or #8C8CCB for small text on other dark palette colors; always verify contrast ratios.
  • Ensure interactive elements have clear visual states, as some color differences are subtle.
  • For critical or very small text, a pure white or very light gray (#F8F8F8) might be necessary on the darkest backgrounds.

Recommended combinations

Cosmic Depth

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

#0A0A2A · #2C2C5E · #5D5D99

Starlight Path

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

#2C2C5E · #8C8CCB · #BCCCEA

Serene Horizon

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

#0A0A2A · #5D5D99 · #BCCCEA

CSS variables

:root {
  --starry-night-canvas-1: #0A0A2A;
  --starry-night-canvas-2: #2C2C5E;
  --starry-night-canvas-3: #5D5D99;
  --starry-night-canvas-4: #8C8CCB;
  --starry-night-canvas-5: #BCCCEA;
}

Tailwind config

theme: {
  extend: {
    colors: {
      "starry-night-canvas": {
        1: "#0A0A2A",
        2: "#2C2C5E",
        3: "#5D5D99",
        4: "#8C8CCB",
        5: "#BCCCEA",
      }
    }
  }
}

Related searches

deep indigo purple schemecosmic blue purple palettestarry night ui colorsserene dark mode purplenight sky color gradient

Palette colors

Hex values

Color 1#0A0A2A
·
Color 2#2C2C5E
·
Color 3#5D5D99
·
Color 4#8C8CCB
·
Color 5#BCCCEA
·

Accessibility

Contrast checker

1
2
3
4
5
1
1.5:1Fail
3.2:1AA18
6.2:1AA
11.9:1AAA
2
1.5:1Fail
2.1:1Fail
4.1:1AA18
8:1AAA
3
3.2:1AA18
2.1:1Fail
1.9:1Fail
3.7:1AA18
4
6.2:1AA
4.1:1AA18
1.9:1Fail
1.9:1Fail
5
11.9:1AAA
8:1AAA
3.7:1AA18
1.9:1Fail

Similar palettes

More like Starry Night Canvas

View all dark
Velvet Night Sky
Celestial Lanterns
Cosmic Drift Dust
Dark Galaxy Nebula
Deep Space Comet
Desert Starlight Glow