Palette

Moonlit Serenade

A serene, harmonious palette reflecting the tranquil beauty of a clear night bathed in moonlight.

monochromecalm5 colors

More monochrome palettes

Preview

See it in context.

Interface

New

Ready when you are.

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

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

Data visualization

#191970#4682B4#6A5ACD#A9A9A9#C8A2C8

Palette guide

How to use Moonlit Serenade

Overview

The Moonlit Serenade palette offers a serene and harmonious blend of deep blues, soothing purples, and calming greys, reflecting the tranquil beauty of a clear night bathed in moonlight. Featuring the profound #191970, the dependable #4682B4, and the elegant #6A5ACD, accented by the soft #A9A9A9 and a delicate #C8A2C8, this palette is ideal for creating designs that exude sophistication, peace, and a touch of mystery. Designers can leverage these colors for luxury branding, calming digital interfaces, or any project aiming for an elegant, nocturnal aesthetic. The diverse range allows for both strong foundational elements and subtle, ethereal accents.

Best used for

Elegant event invitations and decor
Luxury brand websites and packaging
Spiritual or wellness app interfaces
Night-sky photography portfolios
Calming interior design concepts
Sophisticated editorial layouts

Suggested color roles

primary

Utilize #191970 as a deep, sophisticated primary for foundational elements, headers, or immersive backgrounds, providing strong presence.

secondary

Apply #4682B4 for supporting content, navigation, or secondary calls-to-action, offering a reliable and serene mid-blue.

accent

Introduce #C8A2C8 for delicate highlights, interactive elements, or decorative details, providing a soft, ethereal touch.

background

For a clean, soft background, #A9A9A9 works well. For a dramatic, enveloping backdrop, #191970 creates a luxurious feel.

text

White or a very light grey offers excellent readability on #191970 and #6A5ACD. Use #191970 or black for text on lighter backgrounds like #A9A9A9.

Accessibility notes

Ensure sufficient contrast for text, especially when using #A9A9A9 as a background. Dark text (black or #191970) is highly recommended.
The deep #191970 provides excellent contrast for white or very light text, making it suitable for primary text on dark themes.
Be mindful of contrast when pairing #4682B4 with other mid-tones; ensure text or interactive elements have enough distinction.
Test color combinations under various display settings to ensure legibility and visual comfort for all users.

Recommended combinations

Night Sky

Ideal for creating strong, elegant headers, dark UI elements, or striking hero sections where the lighter grey provides a serene contrast.

#191970 · #4682B4 · #A9A9A9

Ethereal Glow

Perfect for subtle gradients, delicate illustrations, or secondary content blocks that need a soft, harmonious, and ethereal feel.

#6A5ACD · #A9A9A9 · #C8A2C8

Deep Harmony

Use for robust navigation, footers, or branding elements that require depth and sophistication with a touch of gentle accent.

#191970 · #6A5ACD · #C8A2C8

CSS variables

:root {
  --moonlit-serenade-1: #191970;
  --moonlit-serenade-2: #4682B4;
  --moonlit-serenade-3: #6A5ACD;
  --moonlit-serenade-4: #A9A9A9;
  --moonlit-serenade-5: #C8A2C8;
}

Tailwind config

theme: {
  extend: {
    colors: {
      "moonlit-serenade": {
        1: "#191970",
        2: "#4682B4",
        3: "#6A5ACD",
        4: "#A9A9A9",
        5: "#C8A2C8",
      }
    }
  }
}

Hex values

Color 1#191970

Color 2#4682B4

Color 3#6A5ACD

Color 4#A9A9A9

Color 5#C8A2C8

Accessibility

Contrast checker

3.6:1AA18

2.8:1Fail

6.3:1AA

6.7:1AA

3.6:1AA18

1.3:1Fail

1.7:1Fail

1.8:1Fail

2.8:1Fail

1.3:1Fail

2.3:1Fail

2.4:1Fail

6.3:1AA

1.7:1Fail

2.3:1Fail

1.1:1Fail

6.7:1AA

1.8:1Fail

2.4:1Fail

1.1:1Fail

Similar palettes

More like Moonlit Serenade

View all monochrome

Azure Ripple Effect

Foggy Shore Serene

Azure Depths Gradient

Azure Sky Grayscale

Deep Arctic Current

Glacial Blue Whisper