Back to palettes

Palette

Starry Night Wanderer

A mystical blend of deep blues and purples, punctuated by twinkling starlight, guiding a cosmic journey.

darkelegant5 colors
More dark palettes

Preview

See it in context.

Interface

New

Ready when you are.

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

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

Data visualization

#0B0E23#1F2847#3D4C6E#6C81A7#E0E0E0

Palette guide

How to use Starry Night Wanderer

Overview

The 'Starry Night Wanderer' palette is a mystical blend of deep blues and purples, punctuated by twinkling starlight. Ranging from the profound #0B0E23 to the bright #E0E0E0, this palette offers designers and developers a sense of elegance, wonder, and serene mystery. The intermediate shades #1F2847, #3D4C6E, and #6C81A7 provide a smooth, captivating gradient, making it ideal for creating immersive and sophisticated digital experiences. It's perfectly suited for projects that aim to evoke a sense of magic, exploration, and refined aesthetics.

Best used for

  • Fantasy RPG game interfaces
  • Mystical branding and websites
  • Creative portfolios and art displays
  • Meditation and spiritual apps
  • Digital art and illustration
  • Sophisticated web designs

Suggested color roles

primary

Utilize #0B0E23 as the deepest, grounding base for primary backgrounds or large visual blocks.

secondary

Apply #1F2847 for supporting content areas, card backgrounds, or subtle distinctions within the dark theme.

accent

Reserve #3D4C6E for mid-tone emphasis on interactive elements, progress bars, or illustrative details.

background

The deepest #0B0E23 is ideal for a main, immersive dark background canvas.

text

For optimal readability on dark backgrounds, use #E0E0E0 or a bright white. For lighter elements, use black or #0B0E23.

Accessibility notes

  • Ensure good contrast for text on #6C81A7, particularly if using mid-tone text colors.
  • #E0E0E0 provides excellent contrast against all darker blues, making it suitable for primary text on dark backgrounds.
  • Avoid using #3D4C6E as text on #1F2847 due to potential low contrast; verify WCAG standards carefully.
  • When using #E0E0E0 as a background, pair it with a very dark text color like black or #0B0E23 for optimal readability.

Recommended combinations

Mystic Depths

A dark base, a supporting dark tone, and a bright, ethereal accent for contrast and clarity.

#0B0E23 · #1F2847 · #E0E0E0

Wanderer's Path

A gradual transition of blues, perfect for creating subtle gradients or visual flow in backgrounds.

#1F2847 · #3D4C6E · #6C81A7

Starlight Guide

Combines a deep background with a soft blue element and a bright, legible text color for emphasis.

#0B0E23 · #6C81A7 · #E0E0E0

CSS variables

:root {
  --starry-night-wanderer-1: #0B0E23;
  --starry-night-wanderer-2: #1F2847;
  --starry-night-wanderer-3: #3D4C6E;
  --starry-night-wanderer-4: #6C81A7;
  --starry-night-wanderer-5: #E0E0E0;
}

Tailwind config

theme: {
  extend: {
    colors: {
      "starry-night-wanderer": {
        1: "#0B0E23",
        2: "#1F2847",
        3: "#3D4C6E",
        4: "#6C81A7",
        5: "#E0E0E0",
      }
    }
  }
}

Related searches

mystical night palettedeep blue purplecosmic wanderer colorsfantasy themeelegant dark blue

Palette colors

Hex values

Color 1#0B0E23
·
Color 2#1F2847
·
Color 3#3D4C6E
·
Color 4#6C81A7
·
Color 5#E0E0E0
·

Accessibility

Contrast checker

1
2
3
4
5
1
1.3:1Fail
2.2:1Fail
4.8:1AA
14.4:1AAA
2
1.3:1Fail
1.7:1Fail
3.7:1AA18
11:1AAA
3
2.2:1Fail
1.7:1Fail
2.2:1Fail
6.5:1AA
4
4.8:1AA
3.7:1AA18
2.2:1Fail
3:1Fail
5
14.4:1AAA
11:1AAA
6.5:1AA
3:1Fail

Similar palettes

More like Starry Night Wanderer

View all dark
Cosmic Drama Scene
Midnight Stardust Bloom
Midnight Velvet Starry
Celestial Aura Bloom
Celestial Starry Veil
Celestial Whisper Nebula