Back to palettes

Palette

Deep Space Mariner

Exploring the mysteries of the deep sea or vast space with a spectrum of cool, dark blues.

cooldark5 colors
More cool palettes

Preview

See it in context.

Interface

New

Ready when you are.

A quick look at how Deep Space Mariner 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 Deep Space Mariner.

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

Data visualization

#051A2C#1A3E5C#3A6B9B#6CA0D1#A0C4E3

Palette guide

How to use Deep Space Mariner

Overview

The Deep Space Mariner palette navigates the profound depths, whether of the ocean or the cosmos, with a stunning spectrum of cool, dark blues. From the abyssal #051A2C to the ethereal #A0C4E3, this palette offers a sense of vastness, tranquility, and understated elegance. It's an exceptional choice for designers and developers aiming to create projects that evoke serenity, exploration, or sophisticated modernity. The harmonious blend of deep, cool tones and luminous highlights makes it perfect for interfaces, branding, or digital art that requires a sense of boundless calm and refined beauty.

Best used for

  • Marine research and conservation websites
  • Luxury yacht or cruise line branding
  • Aerospace and defense company interfaces
  • High-end travel and exploration platforms
  • Educational content on deep sea or space
  • Dark mode themes with a professional, cool tone

Suggested color roles

primary

#1A3E5C - A deep, authoritative navy blue, excellent for main content areas, navigation, or primary branding elements, providing a stable and professional foundation.

secondary

#3A6B9B - A rich, medium blue, ideal for secondary headings, prominent graphical features, or interactive states, adding visual depth without being overly bright.

accent

#A0C4E3 - A luminous, soft sky-blue, perfect for interactive elements, calls-to-action, or important notifications that need to stand out with a gentle glow.

background

#051A2C - The darkest, almost black-blue, serving as an expansive, mysterious backdrop for the entire design, setting a profound and calm mood.

text

#A0C4E3 - For primary text on dark backgrounds, ensuring excellent readability and a consistent cool, ethereal aesthetic.

Accessibility notes

  • Ensure #A0C4E3 text on #051A2C or #1A3E5C backgrounds meets WCAG AA contrast standards for readability.
  • Avoid using mid-tones like #3A6B9B or #6CA0D1 for small text against the darkest backgrounds, as contrast might be insufficient.
  • For critical information and interactive states, always use the lightest shade, #A0C4E3, to maximize visibility.
  • Consider using a slightly darker grey for secondary body text if #A0C4E3 feels too bright for extensive reading, ensuring it still provides good contrast.

Recommended combinations

Abyssal Journey

Creates a deep, layered background effect, perfect for immersive hero sections or full-screen overlays with a sense of depth.

#051A2C · #1A3E5C · #3A6B9B

Celestial Navigation

Excellent for data visualization or progress indicators, moving from deep blue to bright highlight.

#1A3E5C · #6CA0D1 · #A0C4E3

Oceanic Contrast

Ideal for clear content hierarchy, with #051A2C as background, #A0C4E3 for headings, and #6CA0D1 for supporting text.

#051A2C · #A0C4E3 · #6CA0D1

CSS variables

:root {
  --deep-space-mariner-1: #051A2C;
  --deep-space-mariner-2: #1A3E5C;
  --deep-space-mariner-3: #3A6B9B;
  --deep-space-mariner-4: #6CA0D1;
  --deep-space-mariner-5: #A0C4E3;
}

Tailwind config

theme: {
  extend: {
    colors: {
      "deep-space-mariner": {
        1: "#051A2C",
        2: "#1A3E5C",
        3: "#3A6B9B",
        4: "#6CA0D1",
        5: "#A0C4E3",
      }
    }
  }
}

Related searches

deep blue professional palettecool dark mode thememaritime design colorsspace and ocean brandingelegant navy blue hex

Palette colors

Hex values

Color 1#051A2C
·
Color 2#1A3E5C
·
Color 3#3A6B9B
·
Color 4#6CA0D1
·
Color 5#A0C4E3
·

Accessibility

Contrast checker

1
2
3
4
5
1
1.6:1Fail
3.2:1AA18
6.4:1AA
9.7:1AAA
2
1.6:1Fail
2:1Fail
4:1AA18
6.1:1AA
3
3.2:1AA18
2:1Fail
2:1Fail
3.1:1AA18
4
6.4:1AA
4:1AA18
2:1Fail
1.5:1Fail
5
9.7:1AAA
6.1:1AA
3.1:1AA18
1.5:1Fail

Similar palettes

More like Deep Space Mariner

View all cool
Cobalt Midnight Sky
Cosmic Ocean Deep
Abyssal Current Glide
Bioluminescent Abyss
Celestial Deep Nebula
Cobalt Abyss Depths