Back to palettes

Palette

Moonlight Lake Glow

Soft, muted blues reflecting the tranquil surface of a lake under a serene moon.

coolcalm5 colors
More cool palettes

Preview

See it in context.

Interface

New

Ready when you are.

A quick look at how Moonlight Lake 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 Moonlight Lake Glow.

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

Data visualization

#2F3C4F#5F748E#9DB7D1#DBE4F0#1C2735

Palette guide

How to use Moonlight Lake Glow

Overview

The Moonlight Lake Glow palette presents a serene collection of cool blues, reflecting the tranquil surface of a lake under a gentle moon. Ranging from the deep, grounding #1C2735 and #2F3C4F to the ethereal #DBE4F0, this palette embodies calm and clarity. Mid-tones like #5F748E and #9DB7D1 provide smooth transitions and depth. Ideal for designers and developers creating serene digital experiences, this palette is perfect for applications, websites, or branding that aim for a clean, trustworthy, and contemplative aesthetic. Its cool, inviting nature makes it suitable for conveying professionalism, tranquility, and a touch of understated elegance, ensuring a visually harmonious and user-friendly interface.

Best used for

  • Corporate or tech branding
  • Medical or wellness applications
  • Clean, modern website designs
  • Environmental or nature-focused content
  • Professional UI/UX interfaces
  • Photography portfolios

Suggested color roles

primary

Utilize #1C2735 as the dominant dark blue for foundational elements, setting a deep, stable base.

secondary

Apply #2F3C4F for secondary backgrounds, panels, or large sections, providing a subtle shift from the primary.

accent

Employ #9DB7D1 for calls to action, important links, or graphical highlights, offering a clear yet soft focal point.

background

The lightest shade, #DBE4F0, makes an excellent light background, creating an open, airy, and clean canvas.

text

For primary text on light backgrounds, #1C2735 ensures strong readability. Use #DBE4F0 for text on darker backgrounds.

Accessibility notes

  • Ensure sufficient contrast between #1C2735 text and #DBE4F0 background for optimal readability.
  • Avoid using #5F748E text on #9DB7D1 backgrounds as contrast may be insufficient for smaller text.
  • Interactive elements using #9DB7D1 should have clear hover states to distinguish them.
  • For dark mode, pair the lightest colors like #DBE4F0 or #9DB7D1 with the darkest #1C2735 for text and key information.

Recommended combinations

Deep Water

Creates a rich, dark blue foundation with subtle depth, great for headers or footers.

#1C2735 · #2F3C4F · #5F748E

Moonlit Shimmer

A light and airy combination, perfect for main content areas or backgrounds with a gentle gradient.

#DBE4F0 · #9DB7D1 · #5F748E

Calm Reflection

A balanced trio for UI elements, offering clear hierarchy and a serene visual flow.

#2F3C4F · #9DB7D1 · #DBE4F0

CSS variables

:root {
  --moonlight-lake-glow-1: #2F3C4F;
  --moonlight-lake-glow-2: #5F748E;
  --moonlight-lake-glow-3: #9DB7D1;
  --moonlight-lake-glow-4: #DBE4F0;
  --moonlight-lake-glow-5: #1C2735;
}

Tailwind config

theme: {
  extend: {
    colors: {
      "moonlight-lake-glow": {
        1: "#2F3C4F",
        2: "#5F748E",
        3: "#9DB7D1",
        4: "#DBE4F0",
        5: "#1C2735",
      }
    }
  }
}

Related searches

cool blue color schemetranquil lake paletteethereal UI colorscalm professional designlight dark blue palette

Palette colors

Hex values

Color 1#2F3C4F
·
Color 2#5F748E
·
Color 3#9DB7D1
·
Color 4#DBE4F0
·
Color 5#1C2735
·

Accessibility

Contrast checker

1
2
3
4
5
1
2.3:1Fail
5.4:1AA
8.7:1AAA
1.4:1Fail
2
2.3:1Fail
2.3:1Fail
3.7:1AA18
3.1:1AA18
3
5.4:1AA
2.3:1Fail
1.6:1Fail
7.3:1AAA
4
8.7:1AAA
3.7:1AA18
1.6:1Fail
11.8:1AAA
5
1.4:1Fail
3.1:1AA18
7.3:1AAA
11.8:1AAA

Similar palettes

More like Moonlight Lake Glow

View all cool