Back to palettes

Palette

Night Train Voyage

Hues of deep blue and smoky grey evoke the mysterious and calm ambiance of a long night journey by train.

darkdark5 colors
More dark palettes

Preview

See it in context.

Interface

New

Ready when you are.

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

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

Data visualization

#1F2D40#384B66#5C7392#8CA2BB#BECADC

Palette guide

How to use Night Train Voyage

Overview

The Night Train Voyage color palette evokes a sophisticated and mysterious ambiance, perfect for projects requiring depth and a cool, tranquil feel. Featuring a gradient of deep blues and smoky grays, it transitions from the very dark #1F2D40 (Midnight Blue) and #384B66 (Slate Blue) to the softer #5C7392 (Steel Blue), and finally to the ethereal #8CA2BB (Fog Blue) and #BECADC (Cloud Gray). Designers and developers can leverage this palette to create immersive user interfaces, luxurious branding, or atmospheric digital experiences. Its cool undertones and subtle shifts in hue provide a harmonious and calming visual journey, ideal for conveying elegance and quiet strength.

Best used for

  • Luxury travel brand websites or apps
  • High-end tech product interfaces
  • Mystery novel covers or film posters
  • Sophisticated editorial design for articles
  • Dark mode UI themes for productivity tools
  • Branding for consulting or financial services

Suggested color roles

primary

#1F2D40 (Midnight Blue). Use as the dominant background or header color to establish a profound, sophisticated base.

secondary

#384B66 (Slate Blue). Excellent for section backgrounds, navigation elements, or card borders, providing depth without being overwhelming.

accent

#8CA2BB (Fog Blue). Ideal for interactive elements like buttons, links, or progress indicators to draw attention on darker backgrounds.

background

#1F2D40 (Midnight Blue). Establishes a deep, immersive canvas for a truly dark aesthetic.

text

#BECADC (Cloud Gray). Perfect for primary body text on darker backgrounds, ensuring high readability and a soft contrast.

Accessibility notes

  • Ensure #BECADC or #8CA2BB is used for text on #1F2D40 or #384B66 backgrounds to meet WCAG contrast ratios.
  • Avoid using #5C7392 for small text on #384B66 as contrast might be insufficient; test carefully.
  • Always test button and link states for sufficient contrast against their backgrounds, especially with intermediate colors.
  • Consider using #BECADC for key interactive elements like focus states to provide clear visual cues and good contrast.

Recommended combinations

Deep Contrast

Ideal for primary dark mode UI, with #1F2D40 as background, #BECADC for body text, and #8CA2BB for interactive elements or highlights.

#1F2D40 · #BECADC · #8CA2BB

Subtle Gradient

Use #384B66 for a main panel, #5C7392 for sub-sections or borders, and #BECADC for clear, readable text on these backgrounds.

#384B66 · #5C7392 · #BECADC

Accent Focus

For a strong brand statement; #1F2D40 as background, #8CA2BB for prominent headlines or calls to action, supported by #384B66 for secondary content.

#1F2D40 · #8CA2BB · #384B66

CSS variables

:root {
  --night-train-voyage-1: #1F2D40;
  --night-train-voyage-2: #384B66;
  --night-train-voyage-3: #5C7392;
  --night-train-voyage-4: #8CA2BB;
  --night-train-voyage-5: #BECADC;
}

Tailwind config

theme: {
  extend: {
    colors: {
      "night-train-voyage": {
        1: "#1F2D40",
        2: "#384B66",
        3: "#5C7392",
        4: "#8CA2BB",
        5: "#BECADC",
      }
    }
  }
}

Related searches

dark blue color palettemysterious color schemecool tone palette for UItravel themed colorssophisticated dark mode palette

Palette colors

Hex values

Color 1#1F2D40
·
Color 2#384B66
·
Color 3#5C7392
·
Color 4#8CA2BB
·
Color 5#BECADC
·

Accessibility

Contrast checker

1
2
3
4
5
1
1.6:1Fail
2.9:1Fail
5.3:1AA
8.4:1AAA
2
1.6:1Fail
1.8:1Fail
3.4:1AA18
5.4:1AA
3
2.9:1Fail
1.8:1Fail
1.9:1Fail
2.9:1Fail
4
5.3:1AA
3.4:1AA18
1.9:1Fail
1.6:1Fail
5
8.4:1AAA
5.4:1AA
2.9:1Fail
1.6:1Fail

Similar palettes

More like Night Train Voyage

View all dark
Abyssal Trench Mystery
Bioluminescent Deep Trench
Cosmic Abyss Echo
Deep Ocean Caverns
Deep Ocean Trench
Deep Sea Explorer