Back to palettes

Palette

Lunar Eclipse Gloom

Deep blues and silvers capture the stark, haunting beauty of a moonlit sky during an eclipse.

cooldark5 colors
More cool palettes

Preview

See it in context.

Interface

New

Ready when you are.

A quick look at how Lunar Eclipse Gloom 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 Lunar Eclipse Gloom.

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

Data visualization

#1F2633#394B62#5F738F#9FB4CC#DCE4EE

Palette guide

How to use Lunar Eclipse Gloom

Overview

The 'Lunar Eclipse Gloom' palette captures the stark, haunting beauty of a moonlit sky during an eclipse with its deep blues and silvers. This cool-toned collection spans from the profound #1F2633 to the ethereal #DCE4EE, featuring sophisticated mid-tones like #5F738F and #9FB4CC. Designers and developers can leverage this palette to create dramatic, atmospheric, and luxurious digital experiences. It's perfect for projects requiring a sense of depth, mystery, and refined elegance, offering a compelling visual narrative that balances darkness with subtle, cool illumination.

Best used for

  • Luxury branding and high-end marketing
  • Event promotion for sophisticated gatherings
  • Cinematic themes and storytelling platforms
  • Dark mode applications and interfaces
  • Sophisticated fashion and lifestyle content
  • Astronomy-related content and visualizations

Suggested color roles

primary

Utilize #1F2633 as a deep, mysterious primary color for main backgrounds in dark mode or impactful headings.

secondary

Apply #394B62 for supportive dark blue tones, secondary panels, or content blocks in a dark theme.

accent

Use #5F738F as a rich mid-tone accent for interactive elements, borders, or subtle graphical details.

background

Choose #1F2633 for a dramatic dark background or #DCE4EE for a light, airy base in a dual-theme design.

text

Employ #DCE4EE for text on dark backgrounds and #1F2633 for text on light backgrounds to ensure optimal contrast.

Accessibility notes

  • #DCE4EE on #1F2633 offers excellent contrast, making it highly readable for dark mode text.
  • #1F2633 on #DCE4EE ensures good contrast for light mode scenarios, providing versatility.
  • Ensure sufficient contrast when using #9FB4CC as text on #5F738F, especially for smaller font sizes.
  • Consider using a slightly darker version of #1F2633 for very small or fine print on #DCE4EE if WCAG AAA is required.

Recommended combinations

Dark & Dramatic

Creates a high-contrast dark mode foundation, ideal for impactful hero sections and clear text readability.

#1F2633 · #394B62 · #DCE4EE

Ethereal Depth

Suitable for layered UI elements or data visualizations, providing a nuanced and sophisticated blue gradient.

#5F738F · #9FB4CC · #394B62

Light & Cool

Excellent for creating gentle, airy sections with light backgrounds and cool, muted accents.

#DCE4EE · #9FB4CC · #5F738F

CSS variables

:root {
  --lunar-eclipse-gloom-1: #1F2633;
  --lunar-eclipse-gloom-2: #394B62;
  --lunar-eclipse-gloom-3: #5F738F;
  --lunar-eclipse-gloom-4: #9FB4CC;
  --lunar-eclipse-gloom-5: #DCE4EE;
}

Tailwind config

theme: {
  extend: {
    colors: {
      "lunar-eclipse-gloom": {
        1: "#1F2633",
        2: "#394B62",
        3: "#5F738F",
        4: "#9FB4CC",
        5: "#DCE4EE",
      }
    }
  }
}

Related searches

deep blue color palettedark mode blue themecelestial colors brandingsophisticated cool toneslunar eclipse theme UI

Palette colors

Hex values

Color 1#1F2633
·
Color 2#394B62
·
Color 3#5F738F
·
Color 4#9FB4CC
·
Color 5#DCE4EE
·

Accessibility

Contrast checker

1
2
3
4
5
1
1.7:1Fail
3.1:1AA18
7.1:1AAA
11.8:1AAA
2
1.7:1Fail
1.8:1Fail
4.2:1AA18
6.9:1AA
3
3.1:1AA18
1.8:1Fail
2.3:1Fail
3.8:1AA18
4
7.1:1AAA
4.2:1AA18
2.3:1Fail
1.7:1Fail
5
11.8:1AAA
6.9:1AA
3.8:1AA18
1.7:1Fail

Similar palettes

More like Lunar Eclipse Gloom

View all cool
Cobalt Midnight Sky
Deep Space Mariner
Celestial Deep Nebula
Celestial Orb Glow
Celestial Stardust Trails
Cosmic Dust Trail