Back to palettes

Palette

Nocturnal Ocean Gleam

Inspired by the shimmering, cool blues of the ocean under a clear, moonlit night sky.

coolelegant5 colors
More cool palettes

Preview

See it in context.

Interface

New

Ready when you are.

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

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

Data visualization

#0B2447#19376D#576CBC#A5D7E8#071731

Palette guide

How to use Nocturnal Ocean Gleam

Overview

The Nocturnal Ocean Gleam palette captures the serene yet powerful essence of the ocean under a moonlit night. This cool and elegant collection features a spectrum of blues, from the profound deep sea of #071731 and #0B2447 to the rich mid-tone of #19376D. A striking, luminous blue #576CBC provides a captivating accent, while the ethereal #A5D7E8 mimics moonlight reflecting on water, offering a clean, airy contrast. This palette is ideal for designers aiming to create sophisticated, calming, or trustworthy digital experiences, particularly for marine-related projects, tech interfaces, or luxury brands seeking a cool, professional edge.

Best used for

  • Marine conservation websites
  • High-tech company branding
  • Luxury travel agencies (oceanic themes)
  • Serene meditation apps
  • Corporate dark mode UIs
  • Elegant digital art presentations

Suggested color roles

primary

Use #071731 as the deepest shade, perfect for dominant backgrounds, footers, or elements requiring maximum depth and stability.

secondary

Apply #0B2447 for navigation bars, card backgrounds, or secondary content areas, providing a strong foundational blue.

accent

Utilize #576CBC, a vibrant, engaging blue, ideal for call-to-action buttons, interactive elements, or key visual highlights.

background

Employ #A5D7E8, a light, airy blue, that can serve as a clean main background, especially for content-heavy sections.

text

Choose #19376D as a rich, readable blue suitable for darker text on lighter backgrounds, or as a contrasting secondary text color. For light text on dark colors, a near-white is recommended.

Accessibility notes

  • Ensure #A5D7E8 text on #071731 or #0B2447 backgrounds passes WCAG contrast ratios for readability.
  • #576CBC as text on #A5D7E8 might lack sufficient contrast for small font sizes; check carefully.
  • Prioritize high contrast for critical UI elements and body text to ensure readability for all users.
  • Use the lightest color, #A5D7E8, judiciously for text on darker blues; larger font sizes help improve legibility.

Recommended combinations

Deep Sea Glow

Dramatic background with a bright accent and clean highlight for hero sections or key features that need impact.

#071731 · #576CBC · #A5D7E8

Midnight Waves

Harmonious blend of dark blues with a light accent, suitable for navigation and content blocks, offering depth and clarity.

#0B2447 · #19376D · #A5D7E8

Ocean Horizon

Strong base with a light background and a vibrant accent for clear hierarchy and visual interest across interfaces.

#071731 · #A5D7E8 · #576CBC

CSS variables

:root {
  --nocturnal-ocean-gleam-1: #0B2447;
  --nocturnal-ocean-gleam-2: #19376D;
  --nocturnal-ocean-gleam-3: #576CBC;
  --nocturnal-ocean-gleam-4: #A5D7E8;
  --nocturnal-ocean-gleam-5: #071731;
}

Tailwind config

theme: {
  extend: {
    colors: {
      "nocturnal-ocean-gleam": {
        1: "#0B2447",
        2: "#19376D",
        3: "#576CBC",
        4: "#A5D7E8",
        5: "#071731",
      }
    }
  }
}

Related searches

dark ocean blue palettemoonlit water colorsserene blue color schemeelegant navy light bluecool nautical design colors

Palette colors

Hex values

Color 1#0B2447
·
Color 2#19376D
·
Color 3#576CBC
·
Color 4#A5D7E8
·
Color 5#071731
·

Accessibility

Contrast checker

1
2
3
4
5
1
1.3:1Fail
3.2:1AA18
9.9:1AAA
1.2:1Fail
2
1.3:1Fail
2.4:1Fail
7.5:1AAA
1.5:1Fail
3
3.2:1AA18
2.4:1Fail
3.2:1AA18
3.6:1AA18
4
9.9:1AAA
7.5:1AAA
3.2:1AA18
11.5:1AAA
5
1.2:1Fail
1.5:1Fail
3.6:1AA18
11.5:1AAA

Similar palettes

More like Nocturnal Ocean Gleam

View all cool
Winter Aurora Whisper
Aurora Horizon Whisper
Cityscape Nocturne Blue
Midnight Symphony Orchestra
Oriental China Blues
Sapphire Shroud