Back to palettes

Palette

Nocturnal Ocean Tide

The intense and captivating blues of the deep ocean at night, vast and full of mystery.

darkdark5 colors
More dark palettes

Preview

See it in context.

Interface

New

Ready when you are.

A quick look at how Nocturnal Ocean Tide 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 Nocturnal Ocean Tide.

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

Data visualization

#001A4A#002B7A#0042B0#1E90FF#87CEFA

Palette guide

How to use Nocturnal Ocean Tide

Overview

The Nocturnal Ocean Tide palette immerses designers in the intense and captivating blues of the deep ocean at night, vast and full of mystery. This powerful collection showcases a progression from the profound #001A4A and #002B7A to the vibrant electric blue #0042B0. The energetic #1E90FF provides a striking accent, perfectly complemented by the serene, sky-like #87CEFA. This palette is exceptional for projects requiring a strong, dynamic, yet sophisticated blue identity, such as tech startups, sports brands, or any application aiming to convey depth, reliability, and a modern edge.

Best used for

  • Tech and software interfaces
  • Sports team branding
  • Water-related product design
  • Modern corporate websites
  • Dynamic mobile app themes
  • Science and educational platforms

Suggested color roles

primary

Use #001A4A as the darkest, most grounding color, ideal for dominant backgrounds, headers, or foundational elements.

secondary

Apply #002B7A as a rich, deep blue perfect for navigation, card backgrounds, or sections requiring strong visual weight.

accent

Utilize #1E90FF, a bright, energetic blue that commands attention, excellent for call-to-action buttons, interactive states, or key highlights.

background

Employ #87CEFA, a light, refreshing blue suitable for clean content backgrounds or as a vibrant contrast to darker elements.

text

Choose #0042B0 as a strong, readable blue that works well for headlines or important text on lighter backgrounds. For text on dark backgrounds, a very light gray or white is recommended.

Accessibility notes

  • Ensure #87CEFA text on #001A4A or #002B7A backgrounds meets contrast standards for optimal readability.
  • #1E90FF offers good visibility but should be checked for contrast when used as text on #87CEFA, especially for smaller fonts.
  • Avoid using medium blues like #0042B0 for small text on similar background tones due to potential readability issues.
  • Always prioritize WCAG guidelines for text and interactive element contrast, particularly for critical information.

Recommended combinations

Deep Tide Flow

High-impact combination for hero sections, pairing deep blue with vibrant accent and light background for dynamic appeal.

#001A4A · #1E90FF · #87CEFA

Ocean Current

Harmonious blend of blues for content areas, offering depth and clarity with a modern feel.

#002B7A · #0042B0 · #87CEFA

Electric Depths

Strong base with a bright secondary and a powerful accent, ideal for striking visual hierarchy and interactive elements.

#001A4A · #87CEFA · #1E90FF

CSS variables

:root {
  --nocturnal-ocean-tide-1: #001A4A;
  --nocturnal-ocean-tide-2: #002B7A;
  --nocturnal-ocean-tide-3: #0042B0;
  --nocturnal-ocean-tide-4: #1E90FF;
  --nocturnal-ocean-tide-5: #87CEFA;
}

Tailwind config

theme: {
  extend: {
    colors: {
      "nocturnal-ocean-tide": {
        1: "#001A4A",
        2: "#002B7A",
        3: "#0042B0",
        4: "#1E90FF",
        5: "#87CEFA",
      }
    }
  }
}

Related searches

dark blue tech palettedeep ocean color schemevibrant night blue colorsmodern navy blue themepowerful blue website palette

Palette colors

Hex values

Color 1#001A4A
·
Color 2#002B7A
·
Color 3#0042B0
·
Color 4#1E90FF
·
Color 5#87CEFA
·

Accessibility

Contrast checker

1
2
3
4
5
1
1.3:1Fail
1.9:1Fail
5.2:1AA
9.8:1AAA
2
1.3:1Fail
1.5:1Fail
4:1AA18
7.5:1AAA
3
1.9:1Fail
1.5:1Fail
2.7:1Fail
5.1:1AA
4
5.2:1AA
4:1AA18
2.7:1Fail
1.9:1Fail
5
9.8:1AAA
7.5:1AAA
5.1:1AA
1.9:1Fail

Similar palettes

More like Nocturnal Ocean Tide

View all dark
Abyss Gaze
Abyssal Bioluminescent Glow
Abyssal Coral Glow
Abyssal Depths
Abyssal Luminous Depths
Abyssal Rift Shimmer