Palette

Cosmic Crater Moon

Icy greys and soft blues, reflecting the desolate, silent beauty of the lunar surface.

coolminimal5 colors

More cool palettes

Preview

See it in context.

Interface

New

Ready when you are.

A quick look at how Cosmic Crater Moon 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 Cosmic Crater Moon.

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

Data visualization

#778899#A9A9A9#D3D3D3#F5F5F5#D0DBEE

Palette guide

How to use Cosmic Crater Moon

Overview

The Cosmic Crater Moon palette offers a cool, minimalist range of icy greys and soft blues, including #778899, #A9A9A9, and the delicate #F5F5F5. This collection beautifully reflects the desolate, silent beauty of the lunar surface, providing a serene and sophisticated aesthetic. Designers can leverage these subtle tones to create clean, modern interfaces that evoke tranquility and precision. Developers will find these hex codes ideal for crafting elegant digital experiences, from minimalist website themes to sophisticated app designs, ensuring visual harmony and a calm user journey across various digital platforms with a touch of cosmic wonder.

Best used for

Modern tech company websites or apps
Minimalist brand identity design
Architectural or interior design presentations
Science and astronomy educational platforms
E-commerce for high-end, minimalist products
Photography portfolios with a clean aesthetic

Suggested color roles

primary

Utilize #778899 as a grounding primary, suitable for main headings, navigational elements, or subtle brand anchors.

secondary

Employ #A9A9A9 as a supportive secondary, excellent for subheadings, active states, or larger background sections that need gentle depth.

accent

Apply #D0DBEE as a soft accent, perfect for subtle highlights, interactive elements, or small details that need a gentle pop of color.

background

The pristine #F5F5F5 serves as an airy, light background, allowing other colors to softly emerge for a clean aesthetic.

text

For optimal readability, use #778899 or a dark charcoal on #F5F5F5. Black text is also suitable on #D3D3D3.

Accessibility notes

Ensure sufficient contrast between #778899 text and #F5F5F5 background for WCAG AA compliance.
Avoid pairing #D3D3D3 and #F5F5F5 for text, as their low contrast makes them unsuitable for readability.
The darker shades like #778899 and #A9A9A9 offer better contrast for text against lighter backgrounds.
For body text on #D3D3D3, consider using #778899 or a standard black for better legibility.

Recommended combinations

Lunar Horizon

Combine the deeper greys with the lightest white for a clean, sophisticated header or a gentle background gradient.

#778899 · #A9A9A9 · #F5F5F5

Crater Details

Create subtle, layered elements in UI design, mimicking the textures and gentle shifts of the lunar surface.

#A9A9A9 · #D3D3D3 · #D0DBEE

Minimal Contrast

Use #F5F5F5 as a light background, #778899 for primary text, and #A9A9A9 for secondary information or subtle accents.

#F5F5F5 · #778899 · #A9A9A9

CSS variables

:root {
  --cosmic-crater-moon-1: #778899;
  --cosmic-crater-moon-2: #A9A9A9;
  --cosmic-crater-moon-3: #D3D3D3;
  --cosmic-crater-moon-4: #F5F5F5;
  --cosmic-crater-moon-5: #D0DBEE;
}

Tailwind config

theme: {
  extend: {
    colors: {
      "cosmic-crater-moon": {
        1: "#778899",
        2: "#A9A9A9",
        3: "#D3D3D3",
        4: "#F5F5F5",
        5: "#D0DBEE",
      }
    }
  }
}

Hex values

Color 1#778899

Color 2#A9A9A9

Color 3#D3D3D3

Color 4#F5F5F5

Color 5#D0DBEE

Accessibility

Contrast checker

1.5:1Fail

2.4:1Fail

3.3:1AA18

2.6:1Fail

1.5:1Fail

1.6:1Fail

2.2:1Fail

1.7:1Fail

2.4:1Fail

1.6:1Fail

1.4:1Fail

1.1:1Fail

3.3:1AA18

2.2:1Fail

1.4:1Fail

1.3:1Fail

2.6:1Fail

1.7:1Fail

1.1:1Fail

1.3:1Fail

Similar palettes

More like Cosmic Crater Moon

Arctic Shoreline Chill

Celestial Cloud Swirl