Palette

Moonlit Ocean Glow

The soft, silvery glow of moonlight reflecting on the vast, tranquil ocean surface.

CoolElegant5 colors

More Cool palettes

Preview

See it in context.

Interface

New

Ready when you are.

A quick look at how Moonlit Ocean 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 Moonlit Ocean Glow.

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

Data visualization

#000080#4169E1#1E90FF#87CEFA#ADD8E6

Palette guide

How to use Moonlit Ocean Glow

Overview

The Moonlit Ocean Glow palette beautifully captures the soft, silvery glow of moonlight reflecting on the vast, tranquil ocean surface. This cool-toned collection is perfect for designs that evoke serenity, mysticism, and the profound beauty of marine environments. With shades ranging from the deep #000080, through the vibrant #1E90FF, to the ethereal #ADD8E6, it offers a dynamic yet calming spectrum. Designers and developers can leverage this palette to craft immersive user interfaces, captivating branding, or artistic compositions that resonate with depth and a touch of magic. It's particularly effective for projects requiring a refreshing, cool aesthetic with broad appeal.

Best used for

Marine and aquatic themed websites
Travel agencies focusing on cruises
Serene digital art and illustrations
Children's educational content about oceans
Calming user interfaces and applications
Mystical branding and packaging

Suggested color roles

primary

Use #000080 as a strong, deep navy blue for main headings, footers, or immersive dark mode backgrounds.

secondary

Apply #4169E1 for supporting content blocks, secondary navigation, or to add a rich blue layer.

accent

Employ #ADD8E6 for bright, ethereal highlights, interactive elements, or delicate graphic details.

background

The lightest shade, #ADD8E6, provides a clean, airy background, while #000080 can create a deep, immersive canvas.

text

For optimal readability on light backgrounds like #ADD8E6, use #000080 or #4169E1. On dark backgrounds, #ADD8E6 provides clear readability.

Accessibility notes

Ensure sufficient contrast when pairing #1E90FF with #4169E1 for text due to their similar values.
Text in #ADD8E6 on #000080 offers excellent readability for body copy.
Avoid using #87CEFA or #ADD8E6 for critical text elements on very light backgrounds.
Always test color combinations with accessibility checkers for WCAG compliance, especially for interactive elements.

Recommended combinations

Ocean Depths

Ideal for a deep, marine theme where #000080 is the background, #1E90FF for elements, and #ADD8E6 for highlights.

#000080 · #1E90FF · #ADD8E6

Wave Layers

Perfect for creating depth and movement, with #4169E1 as base, #87CEFA for content, and #ADD8E6 for airy accents.

#4169E1 · #87CEFA · #ADD8E6

Glow & Shadow

Excellent for gradients or large graphic elements, showcasing a smooth progression through the palette's darker to mid-blues.

#000080 · #4169E1 · #1E90FF

CSS variables

:root {
  --moonlit-ocean-glow-2-1: #000080;
  --moonlit-ocean-glow-2-2: #4169E1;
  --moonlit-ocean-glow-2-3: #1E90FF;
  --moonlit-ocean-glow-2-4: #87CEFA;
  --moonlit-ocean-glow-2-5: #ADD8E6;
}

Tailwind config

theme: {
  extend: {
    colors: {
      "moonlit-ocean-glow-2": {
        1: "#000080",
        2: "#4169E1",
        3: "#1E90FF",
        4: "#87CEFA",
        5: "#ADD8E6",
      }
    }
  }
}

Hex values

Color 1#000080

Color 2#4169E1

Color 3#1E90FF

Color 4#87CEFA

Color 5#ADD8E6

Accessibility

Contrast checker

3.3:1AA18

4.9:1AA

9.3:1AAA

10.5:1AAA

3.3:1AA18

1.5:1Fail

2.8:1Fail

3.2:1AA18

4.9:1AA

1.5:1Fail

1.9:1Fail

2.1:1Fail

9.3:1AAA

2.8:1Fail

1.9:1Fail

1.1:1Fail

10.5:1AAA

3.2:1AA18

2.1:1Fail

1.1:1Fail

Similar palettes

More like Moonlit Ocean Glow