Back to palettes

Palette

Moonlit Cove

Cool greys and soft blues evoke the quiet shimmer of moonlight reflecting on water in a secluded cove.

coolcalm5 colors
More cool palettes

Preview

See it in context.

Interface

New

Ready when you are.

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

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

Data visualization

#2F4F4F#778899#C1CFCF#465C5C#687B7B

Palette guide

How to use Moonlit Cove

Overview

The Moonlit Cove palette captures the quiet shimmer of moonlight reflecting on water with its blend of cool greys and soft blues. Anchored by the deep, sophisticated #2F4F4F (dark slate gray) and complemented by the supporting #465C5C (dark slate gray variant), this palette introduces serene mid-tones like #778899 (light slate gray) and #687B7B (greyish blue-green), culminating in the airy #C1CFCF (light greyish cyan). This collection is perfect for designers and developers seeking to evoke a sense of calm, tranquility, and understated elegance, making it highly versatile for various digital and physical applications.

Best used for

  • Nautical or marine-themed branding
  • Environmental and conservation websites
  • Minimalist UI/UX design for apps
  • Spa and wellness marketing materials
  • Architectural visualization and renderings
  • Serene editorial layouts and photography

Suggested color roles

primary

Apply #2F4F4F as a strong, grounding color for headers, footers, or main navigation, providing depth and sophistication.

secondary

Use #465C5C for larger content blocks, sidebars, or as a contrasting element against lighter shades, maintaining a cool tone.

accent

Introduce #778899 for subtle highlights, interactive elements, or graphic details to add a touch of gentle blue-grey.

background

The light and airy #C1CFCF serves as an excellent primary background, creating a clean and expansive feel.

text

For optimal readability on light backgrounds like #C1CFCF, use #2F4F4F or a dark charcoal. For dark backgrounds, a clean white or near-white is recommended.

Accessibility notes

  • The contrast between #2F4F4F and #C1CFCF is excellent, suitable for all text sizes.
  • Ensure #778899 or #687B7B on #C1CFCF meets WCAG AA standards for small body text; increase font size or boldness if needed.
  • Avoid using #687B7B on #778899 for text due to insufficient contrast.
  • For interactive elements, ensure focus states use a color with high contrast against both normal and hover states.

Recommended combinations

Deep Water

Creates a strong, serene visual hierarchy for hero sections or key information.

#2F4F4F · #C1CFCF · #778899

Cove Shimmer

Ideal for secondary content areas, offering a softer yet sophisticated feel.

#465C5C · #C1CFCF · #687B7B

Serene Depth

Excellent for balancing deep cool tones with light, airy spaces in a harmonious way.

#2F4F4F · #778899 · #C1CFCF

CSS variables

:root {
  --moonlit-cove-1: #2F4F4F;
  --moonlit-cove-2: #778899;
  --moonlit-cove-3: #C1CFCF;
  --moonlit-cove-4: #465C5C;
  --moonlit-cove-5: #687B7B;
}

Tailwind config

theme: {
  extend: {
    colors: {
      "moonlit-cove": {
        1: "#2F4F4F",
        2: "#778899",
        3: "#C1CFCF",
        4: "#465C5C",
        5: "#687B7B",
      }
    }
  }
}

Related searches

serene cool palettemoonlit water colorsgrey blue night schemecalm cove aestheticminimalist cool tones

Palette colors

Hex values

Color 1#2F4F4F
·
Color 2#778899
·
Color 3#C1CFCF
·
Color 4#465C5C
·
Color 5#687B7B
·

Accessibility

Contrast checker

1
2
3
4
5
1
2.5:1Fail
5.6:1AA
1.3:1Fail
2:1Fail
2
2.5:1Fail
2.3:1Fail
2:1Fail
1.2:1Fail
3
5.6:1AA
2.3:1Fail
4.4:1AA18
2.8:1Fail
4
1.3:1Fail
2:1Fail
4.4:1AA18
1.6:1Fail
5
2:1Fail
1.2:1Fail
2.8:1Fail
1.6:1Fail

Similar palettes

More like Moonlit Cove

View all cool