Palette

Starry Night Voyage

Deep indigos and starlit blues paint a picture of a journey through the vast, dark expanse of space.

darkcalm5 colors

More dark palettes

Preview

See it in context.

Interface

New

Ready when you are.

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

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

Data visualization

#0F0F23#1E2E4E#3A5A7B#8DA6C1#E0E6F0

Palette guide

How to use Starry Night Voyage

Overview

The 'Starry Night Voyage' palette features deep indigos and starlit blues that paint a picture of a journey through the vast, dark expanse of space. Ranging from the profound #0F0F23 to the airy #E0E6F0, this palette offers designers and developers a sense of exploration, tranquility, and clarity. The intermediate shades #1E2E4E, #3A5A7B, and #8DA6C1 provide a smooth, expansive gradient, making it ideal for creating immersive and sophisticated digital experiences. It's perfectly suited for themes of technology, education, and travel, conveying both depth and lightness.

Best used for

Space-themed educational content
Travel agencies and tourism websites
High-tech company branding
Scientific visualization tools
Calm and focused user interfaces
Digital art and illustration

Suggested color roles

primary

Utilize #0F0F23 as the deepest, foundational dark blue for backgrounds or primary content areas.

secondary

Apply #1E2E4E for supporting sections, card backgrounds, or subtle distinctions within the dark theme.

accent

Reserve #3A5A7B for mid-tone emphasis on interactive elements, progress indicators, or key information.

background

The deepest #0F0F23 is perfect for a deep space feel, while #E0E6F0 offers a light, expansive backdrop.

text

For dark backgrounds, use #E0E6F0 or white. For light backgrounds, #0F0F23 or a dark charcoal ensures readability.

Accessibility notes

Ensure good contrast for text on #8DA6C1, especially if using mid-tone text colors.
#E0E6F0 provides excellent contrast against all darker blues, making it suitable for primary text on dark backgrounds.
Avoid using #3A5A7B as text on #1E2E4E due to potential low contrast; verify WCAG standards carefully.
When using #E0E6F0 as a background, pair it with a very dark text color like #0F0F23 for optimal readability.

Recommended combinations

Cosmic Journey

A deep base, a harmonious mid-blue element, and a bright, soft highlight for clarity and depth.

#0F0F23 · #3A5A7B · #E0E6F0

Galactic Gradient

A smooth transition of blues, ideal for dynamic backgrounds, headers, or visual hierarchies.

#1E2E4E · #3A5A7B · #8DA6C1

Starlit Path

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

#0F0F23 · #8DA6C1 · #E0E6F0

CSS variables

:root {
  --starry-night-voyage-1: #0F0F23;
  --starry-night-voyage-2: #1E2E4E;
  --starry-night-voyage-3: #3A5A7B;
  --starry-night-voyage-4: #8DA6C1;
  --starry-night-voyage-5: #E0E6F0;
}

Tailwind config

theme: {
  extend: {
    colors: {
      "starry-night-voyage": {
        1: "#0F0F23",
        2: "#1E2E4E",
        3: "#3A5A7B",
        4: "#8DA6C1",
        5: "#E0E6F0",
      }
    }
  }
}

Hex values

Color 1#0F0F23

Color 2#1E2E4E

Color 3#3A5A7B

Color 4#8DA6C1

Color 5#E0E6F0

Accessibility

Contrast checker

1.4:1Fail

2.6:1Fail

7.5:1AAA

15:1AAA

1.4:1Fail

1.9:1Fail

5.4:1AA

10.8:1AAA

2.6:1Fail

1.9:1Fail

2.9:1Fail

5.7:1AA

7.5:1AAA

5.4:1AA

2.9:1Fail

2:1Fail

15:1AAA

10.8:1AAA

5.7:1AA

2:1Fail

Similar palettes

More like Starry Night Voyage