Back to palettes

Palette

Moonlit Ocean Glow

A serene and ethereal blend of cool blues, reminiscent of gentle ocean waves shimmering under moonlight.

CoolCalm5 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

#E0F2F7#B2EBF2#80DEEA#4DD0E1#00BCD4

Palette guide

How to use Moonlit Ocean Glow

Overview

The Moonlit Ocean Glow palette offers a refreshing and serene blend of cool blues, perfect for projects aiming for a light, ethereal, or aquatic feel. This collection ranges from the very light #E0F2F7, reminiscent of soft moonlight, through vibrant aquas like #80DEEA and #4DD0E1, culminating in the deeper, yet still bright, #00BCD4. Designers can leverage this palette to evoke feelings of calm, clarity, and spaciousness. It’s particularly effective for digital interfaces, branding, or environmental graphics where a clean, inviting, and tranquil atmosphere is desired. The harmonious progression of these blue-green tones ensures visual unity and a polished aesthetic.

Best used for

  • Spa and wellness brand identities
  • Coastal resort websites and marketing
  • Eco-friendly product packaging
  • Healthcare and medical facility interiors
  • Digital apps for meditation or relaxation
  • Children's educational content about oceans

Suggested color roles

primary

#00BCD4 - Use this vibrant aqua for key call-to-action buttons, prominent headings, or brand logos to establish a strong, clear presence.

secondary

#4DD0E1 - Ideal for subheadings, active navigation states, or supporting graphical elements, providing a slightly softer yet still energetic contrast.

accent

#80DEEA - Perfect for small interactive elements, highlights, or decorative details where a touch of bright, ethereal glow is needed.

background

#E0F2F7 - A very light, almost white blue, excellent for clean, spacious backgrounds that allow other elements to breathe and stand out.

text

For dark text, a deep charcoal like #333333 provides good contrast. For light text on darker elements, pure white is suitable.

Accessibility notes

  • Ensure sufficient contrast when using #E0F2F7 as a background with lighter text colors; consider #00BCD4 or a dark charcoal for readability.
  • Text in #4DD0E1 or #80DEEA against white or very light backgrounds may lack sufficient contrast for WCAG AA.
  • Use #00BCD4 for important interactive elements to ensure they are clearly visible against lighter shades.
  • For large text, aim for at least 4.5:1 contrast ratio against the background; for smaller text, consider stronger pairings.

Recommended combinations

Calm Interface

Excellent for clean, user-friendly interfaces, using the lightest for background and the darkest for key interactions.

#E0F2F7 · #B2EBF2 · #00BCD4

Aquatic Branding

Ideal for logos and branding materials for businesses related to water, health, or sustainability.

#4DD0E1 · #80DEEA · #00BCD4

Ethereal Gradient

Creates beautiful, subtle gradients for headers or background elements, conveying depth and serenity.

#E0F2F7 · #B2EBF2 · #4DD0E1

CSS variables

:root {
  --moonlit-ocean-glow-1: #E0F2F7;
  --moonlit-ocean-glow-2: #B2EBF2;
  --moonlit-ocean-glow-3: #80DEEA;
  --moonlit-ocean-glow-4: #4DD0E1;
  --moonlit-ocean-glow-5: #00BCD4;
}

Tailwind config

theme: {
  extend: {
    colors: {
      "moonlit-ocean-glow": {
        1: "#E0F2F7",
        2: "#B2EBF2",
        3: "#80DEEA",
        4: "#4DD0E1",
        5: "#00BCD4",
      }
    }
  }
}

Related searches

calm blue color palettelight aqua design colorsethereal ocean web designserene cool color schemesoft blue brand identity

Palette colors

Hex values

Color 1#E0F2F7
·
Color 2#B2EBF2
·
Color 3#80DEEA
·
Color 4#4DD0E1
·
Color 5#00BCD4
·

Accessibility

Contrast checker

1
2
3
4
5
1
1.1:1Fail
1.3:1Fail
1.6:1Fail
2:1Fail
2
1.1:1Fail
1.2:1Fail
1.4:1Fail
1.8:1Fail
3
1.3:1Fail
1.2:1Fail
1.2:1Fail
1.5:1Fail
4
1.6:1Fail
1.4:1Fail
1.2:1Fail
1.2:1Fail
5
2:1Fail
1.8:1Fail
1.5:1Fail
1.2:1Fail

Similar palettes

More like Moonlit Ocean Glow

View all Cool
Aegean Coastline Muse
Indigo Ocean Depth
Muted Ocean Depth
Skyward Gaze
Teal Ocean Depths
Alpine Lake Dawn