Back to palettes

Palette

Starlit Canvas

Captures the deep, inky blues and faint light of a vast, mysterious starlit night sky.

darkdark5 colors
More dark palettes

Preview

See it in context.

Interface

New

Ready when you are.

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

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

Data visualization

#1A237E#283593#3F51B5#5C6BC0#0F1240

Palette guide

How to use Starlit Canvas

Overview

The Starlit Canvas palette captures the deep, inky blues and faint light of a vast, mysterious starlit night sky. This dark and profound scheme is anchored by the almost black #0F1240 and the deep indigo #1A237E, transitioning through the rich #283593 and the vibrant #3F51B5. The soft, ethereal #5C6BC0 adds a touch of subtle luminescence, mimicking distant starlight. Designers can leverage this palette to create captivating digital experiences, from dark-themed websites to immersive game environments. The interplay of deep, grounding shades with brighter, shimmering accents provides excellent versatility for establishing visual depth and highlighting key elements. Developers will find these hex codes perfect for crafting elegant interfaces that convey mystery, sophistication, and a touch of the fantastical.

Best used for

  • Space exploration or astronomy websites
  • Mysterious and elegant brand identities
  • Science fiction game UI and environment art
  • Luxury product landing pages with a dark theme
  • Astrology or spiritual app designs
  • Digital art evoking cosmic landscapes

Suggested color roles

primary

Utilize #0F1240 or #1A237E as the dominant background color for a deep, immersive canvas, perfect for setting a mysterious and sophisticated mood.

secondary

Apply #283593 for secondary content areas, card headers, or navigation, providing a rich, supportive color that complements the darker base.

accent

Leverage #3F51B5 for call-to-action buttons, interactive highlights, or significant data points, drawing immediate attention with its vibrant glow.

background

The darkest shade, #0F1240, is excellent for primary backgrounds in a dark UI, creating an atmospheric and profound depth.

text

For text on dark backgrounds like #0F1240 or #1A237E, use #5C6BC0 for primary content, ensuring good readability. For lighter elements, a dark gray or black is suitable.

Accessibility notes

  • Ensure #5C6BC0 has sufficient contrast against darker shades like #0F1240 and #1A237E for all body text.
  • Avoid using #283593 directly on #1A237E for small text; check contrast ratios carefully to prevent readability issues.
  • For interactive elements, confirm that #3F51B5 provides clear visual distinction against its surrounding dark background.
  • Consider increasing text size or using a bolder font weight for any text placed on mid-tone backgrounds like #283593.

Recommended combinations

Deep Indigo

Ideal for creating layered, dark backgrounds or subtle depth in complex UI components, evoking mystery.

#0F1240 · #1A237E · #283593

Starlit Glow

Perfect for glowing effects, hover states, or highlighting interactive elements against a deep, dark base.

#1A237E · #3F51B5 · #5C6BC0

Cosmic Harmony

Great for illustrating progression or hierarchy in data visualizations, or for elegant decorative elements in a dark theme.

#283593 · #3F51B5 · #5C6BC0

CSS variables

:root {
  --starlit-canvas-1: #1A237E;
  --starlit-canvas-2: #283593;
  --starlit-canvas-3: #3F51B5;
  --starlit-canvas-4: #5C6BC0;
  --starlit-canvas-5: #0F1240;
}

Tailwind config

theme: {
  extend: {
    colors: {
      "starlit-canvas": {
        1: "#1A237E",
        2: "#283593",
        3: "#3F51B5",
        4: "#5C6BC0",
        5: "#0F1240",
      }
    }
  }
}

Related searches

deep blue night palettestarlit sky colorsmysterious indigo themedark celestial UIblue galaxy design

Palette colors

Hex values

Color 1#1A237E
·
Color 2#283593
·
Color 3#3F51B5
·
Color 4#5C6BC0
·
Color 5#0F1240
·

Accessibility

Contrast checker

1
2
3
4
5
1
1.3:1Fail
1.9:1Fail
2.7:1Fail
1.3:1Fail
2
1.3:1Fail
1.5:1Fail
2.1:1Fail
1.7:1Fail
3
1.9:1Fail
1.5:1Fail
1.4:1Fail
2.6:1Fail
4
2.7:1Fail
2.1:1Fail
1.4:1Fail
3.7:1AA18
5
1.3:1Fail
1.7:1Fail
2.6:1Fail
3.7:1AA18

Similar palettes

More like Starlit Canvas

View all dark
Celestial Night Bloom
Celestial Night Sky
Celestial Sapphire Dust
Midnight Forest Velvet
Starry Desert Night
Starry Night Horizon