Back to palettes

Palette

Lunar Eclipse

A stark yet elegant monochrome range inspired by the various phases and shadows of a lunar eclipse.

monochromeminimal5 colors
More monochrome palettes

Preview

See it in context.

Interface

New

Ready when you are.

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

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

Data visualization

#2F4F4F#708090#D3D3D3#C0C0C0#808080

Palette guide

How to use Lunar Eclipse

Overview

The 'Lunar Eclipse' palette offers a stark yet elegant monochrome range inspired by the various phases and shadows of a lunar eclipse. This sophisticated collection features a unique blend of desaturated teal-greys, from the deep #2F4F4F to the light #D3D3D3, complemented by classic greys like #808080 and #C0C0C0. Designers and developers will find its cool, subtle character perfect for creating modern, minimalist designs that exude tranquility and professionalism. It provides depth and refinement without relying on bold colors, making it versatile for a wide array of digital and print applications.

Best used for

  • Luxury brand identity and corporate websites
  • Minimalist web design and app interfaces
  • Scientific data visualization and infographics
  • Contemporary art exhibitions and galleries
  • Architectural portfolios and presentations
  • High-end editorial layouts and publications

Suggested color roles

primary

Utilize #2F4F4F as a deep, sophisticated primary color for headings, important buttons, or foundational elements.

secondary

Apply #708090 for muted, cool mid-tones in supportive text, subheadings, or secondary content blocks.

accent

Use #808080 as a balanced grey accent for interactive elements, borders, or subtle graphical details.

background

Choose #D3D3D3 for a light, clean, and expansive main background, or #C0C0C0 for a slightly darker base.

text

Employ #2F4F4F for primary body text on light backgrounds to ensure excellent readability and a cohesive cool tone.

Accessibility notes

  • #2F4F4F on #D3D3D3 offers excellent contrast, making it ideal for primary text and ensuring readability.
  • #808080 on #C0C0C0 or #D3D3D3 should be checked for sufficient contrast, especially for small text or critical information.
  • For interactive elements, ensure distinct contrast between states using colors like #2F4F4F and #708090.
  • Avoid using #D3D3D3 or #C0C0C0 for text on very similar light backgrounds, as contrast will be too low.

Recommended combinations

Elegant Contrast

Creates a clean, readable foundation for web pages, blending light backgrounds with a strong primary color.

#D3D3D3 · #C0C0C0 · #2F4F4F

Subtle Depth

Ideal for layered monochrome UI elements or content blocks, providing gentle visual separation and sophistication.

#708090 · #808080 · #2F4F4F

Cool Mid-tones

Suitable for creating balanced UI components like cards, navigation, or subtle background textures.

#C0C0C0 · #708090 · #808080

CSS variables

:root {
  --lunar-eclipse-1: #2F4F4F;
  --lunar-eclipse-2: #708090;
  --lunar-eclipse-3: #D3D3D3;
  --lunar-eclipse-4: #C0C0C0;
  --lunar-eclipse-5: #808080;
}

Tailwind config

theme: {
  extend: {
    colors: {
      "lunar-eclipse": {
        1: "#2F4F4F",
        2: "#708090",
        3: "#D3D3D3",
        4: "#C0C0C0",
        5: "#808080",
      }
    }
  }
}

Related searches

sophisticated grey palettecool monochrome designelegant lunar colorssubtle teal greymodern minimalist UI

Palette colors

Hex values

Color 1#2F4F4F
·
Color 2#708090
·
Color 3#D3D3D3
·
Color 4#C0C0C0
·
Color 5#808080
·

Accessibility

Contrast checker

1
2
3
4
5
1
2.2:1Fail
6:1AA
4.9:1AA
2.3:1Fail
2
2.2:1Fail
2.7:1Fail
2.2:1Fail
1:1Fail
3
6:1AA
2.7:1Fail
1.2:1Fail
2.6:1Fail
4
4.9:1AA
2.2:1Fail
1.2:1Fail
2.2:1Fail
5
2.3:1Fail
1:1Fail
2.6:1Fail
2.2:1Fail

Similar palettes

More like Lunar Eclipse

View all monochrome
Selene's Crater Dust
Greyscale Aura
Lunar Crater Dust
Lunar Dust Trail
Lunar Dust Veil
Silver Moonlight