Back to palettes

Palette

Neptune's Embrace

A deep monochrome of oceanic blues submerges you in the powerful and mysterious embrace of the sea god Neptune.

monochromedark5 colors
More monochrome palettes

Preview

See it in context.

Interface

New

Ready when you are.

A quick look at how Neptune's Embrace 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 Neptune's Embrace.

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

Data visualization

#001F3F#003153#004370#00578F#006AB5

Palette guide

How to use Neptune's Embrace

Overview

The Neptune's Embrace palette is a deep monochrome of oceanic blues, submerging designs in the powerful and mysterious embrace of the sea. Featuring a very dark navy #001F3F, deep ocean blue #003153, rich sapphire #004370, profound cerulean #00578F, and an expansive ocean blue #006AB5, this collection is perfect for conveying depth, tranquility, and professionalism. Designers can leverage these hex codes to create sophisticated, calming, and trustworthy visuals. Developers will find this palette ideal for corporate websites, serene app interfaces, or branding that requires a sense of stability and elegance, offering a cohesive and easily scalable color system for various UI states.

Best used for

  • Corporate branding and identity
  • Maritime or ocean-themed websites
  • Financial services interfaces
  • Luxury product packaging
  • Relaxation and meditation apps
  • Elegant editorial designs

Suggested color roles

primary

#001F3F (Very Dark Navy) - Ideal for main backgrounds, large content blocks, or primary navigation, providing a deep, stable foundation.

secondary

#003153 (Deep Ocean Blue) - Excellent for secondary backgrounds, card elements, or prominent UI components, adding subtle depth.

accent

#006AB5 (Expansive Ocean Blue) - Use for calls-to-action, important links, or interactive elements to draw attention within the blue spectrum.

background

#001F3F (Very Dark Navy) - The darkest shade, providing a strong, elegant base that enhances readability of lighter elements.

text

#00578F (Profound Cerulean) - Suitable for headlines and subheadings. For body text, use a light gray or white against #001F3F or #003153 for optimal readability.

Accessibility notes

  • Ensure sufficient contrast between text and background, especially when using lighter blues on darker blues for WCAG AA compliance.
  • Avoid placing adjacent shades like #001F3F and #003153 for small elements without clear borders to maintain distinction.
  • Use #001F3F and #003153 as primary backgrounds, ensuring lighter text colors like white or very light gray are highly legible.
  • Test text legibility across various screen types and lighting conditions due to the monochrome nature of the palette.

Recommended combinations

Deep Sea

Creates a profound sense of depth and professionalism, ideal for corporate websites or sophisticated app interfaces.

#001F3F · #003153 · #00578F

Ocean Current

Offers a flowing, harmonious gradient effect, suitable for background elements, data visualizations, or subtle branding.

#003153 · #004370 · #006AB5

Abyss Accent

Provides strong contrast for key information or calls-to-action, allowing the lightest blue to stand out elegantly.

#001F3F · #006AB5 · #004370

CSS variables

:root {
  --neptune-s-embrace-1: #001F3F;
  --neptune-s-embrace-2: #003153;
  --neptune-s-embrace-3: #004370;
  --neptune-s-embrace-4: #00578F;
  --neptune-s-embrace-5: #006AB5;
}

Tailwind config

theme: {
  extend: {
    colors: {
      "neptune-s-embrace": {
        1: "#001F3F",
        2: "#003153",
        3: "#004370",
        4: "#00578F",
        5: "#006AB5",
      }
    }
  }
}

Related searches

monochromatic blue palettedeep ocean color schemenavy blue professional designelegant blue ui colorsdark blue brand identity

Palette colors

Hex values

Color 1#001F3F
·
Color 2#003153
·
Color 3#004370
·
Color 4#00578F
·
Color 5#006AB5
·

Accessibility

Contrast checker

1
2
3
4
5
1
1.2:1Fail
1.6:1Fail
2.2:1Fail
2.9:1Fail
2
1.2:1Fail
1.3:1Fail
1.8:1Fail
2.4:1Fail
3
1.6:1Fail
1.3:1Fail
1.4:1Fail
1.8:1Fail
4
2.2:1Fail
1.8:1Fail
1.4:1Fail
1.4:1Fail
5
2.9:1Fail
2.4:1Fail
1.8:1Fail
1.4:1Fail

Similar palettes

More like Neptune's Embrace

View all monochrome
Deep Ocean Abyss
Indigo Current Flow
Indigo Ocean Depths
City Twilight Mist
Deep Azure Plunge
Grayscale Deep Mood