Back to palettes

Palette

Midnight Lagoon Glow

Deep blues and a shimmering aqua reflect the mysterious beauty of a moonlit lagoon.

darkdark5 colors
More dark palettes

Preview

See it in context.

Interface

New

Ready when you are.

A quick look at how Midnight Lagoon Glow 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 Midnight Lagoon Glow.

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

Data visualization

#050E1A#1A2E4C#33597D#6B9EC8#A3D2E8

Palette guide

How to use Midnight Lagoon Glow

Overview

The Midnight Lagoon Glow palette captures the mysterious and tranquil beauty of a moonlit ocean. It features a range of deep, serene blues, from the near-black #050E1A and rich #1A2E4C (deep navy) to the shimmering #6B9EC8 and the ethereal #A3D2E8 (lightest aqua). This gradient of blues offers designers and developers a sophisticated spectrum for creating calm yet captivating digital experiences. The palette is perfect for evoking a sense of depth, tranquility, and a subtle, luminous glow, making it highly versatile for various dark-themed projects.

Best used for

  • Marine and aquatic-themed websites or apps
  • Tranquil meditation or relaxation applications
  • Night mode user interfaces (UI)
  • Science and technology branding
  • Serene digital art or background graphics
  • Environmental or conservation initiatives

Suggested color roles

primary

Employ #1A2E4C as the dominant blue for main content panels or primary navigation, providing a deep, stable foundation.

secondary

Use #33597D for supportive elements, subheadings, or secondary content areas, offering a slightly brighter contrast.

accent

Apply #A3D2E8 sparingly for glowing highlights, interactive elements, or key calls-to-action, creating a luminous effect.

background

Utilize #050E1A as the deepest background color, offering an immersive, near-black canvas that enhances the blues.

text

For primary text, #A3D2E8 or #6B9EC8 provides excellent readability on darker backgrounds. For secondary text, #33597D can be used with sufficient font size.

Accessibility notes

  • Ensure #A3D2E8 and #6B9EC8 have sufficient contrast when used for text on #050E1A or #1A2E4C backgrounds.
  • Avoid using #050E1A and #1A2E4C as text and background pairs due to insufficient contrast.
  • The lighter blues like #6B9EC8 may require larger font sizes when placed on #33597D for optimal readability.
  • Maintain clear visual cues for interactive elements, ensuring they stand out against the deep blues.

Recommended combinations

Deep Ocean Base

A classic dark mode with #050E1A as background, #1A2E4C for content cards, and #A3D2E8 for primary text or key elements.

#050E1A · #1A2E4C · #A3D2E8

Tranquil Flow

Layered design with #1A2E4C for main panels, #33597D for sub-panels or dividers, and #6B9EC8 for important information.

#1A2E4C · #33597D · #6B9EC8

Luminous Highlight

Use #050E1A as background, #6B9EC8 for headings, and #A3D2E8 for glowing accents, buttons, or active states.

#050E1A · #6B9EC8 · #A3D2E8

CSS variables

:root {
  --midnight-lagoon-glow-1: #050E1A;
  --midnight-lagoon-glow-2: #1A2E4C;
  --midnight-lagoon-glow-3: #33597D;
  --midnight-lagoon-glow-4: #6B9EC8;
  --midnight-lagoon-glow-5: #A3D2E8;
}

Tailwind config

theme: {
  extend: {
    colors: {
      "midnight-lagoon-glow": {
        1: "#050E1A",
        2: "#1A2E4C",
        3: "#33597D",
        4: "#6B9EC8",
        5: "#A3D2E8",
      }
    }
  }
}

Related searches

deep blue color palettetranquil ocean colorsnight mode design blueserene gradient colorscool blue UI palette

Palette colors

Hex values

Color 1#050E1A
·
Color 2#1A2E4C
·
Color 3#33597D
·
Color 4#6B9EC8
·
Color 5#A3D2E8
·

Accessibility

Contrast checker

1
2
3
4
5
1
1.4:1Fail
2.6:1Fail
6.8:1AA
11.9:1AAA
2
1.4:1Fail
1.9:1Fail
4.8:1AA
8.4:1AAA
3
2.6:1Fail
1.9:1Fail
2.6:1Fail
4.5:1AA
4
6.8:1AA
4.8:1AA
2.6:1Fail
1.8:1Fail
5
11.9:1AAA
8.4:1AAA
4.5:1AA
1.8:1Fail

Similar palettes

More like Midnight Lagoon Glow

View all dark
Abyss Gaze
Abyssal Bioluminescent Glow
Abyssal Coral Glow
Abyssal Depths
Abyssal Glow Wonders
Abyssal Reef Mystery