Palette

Moonlit Desert Oasis

A tranquil blend of cool grays and pale blues, depicting a serene desert oasis under the calm glow of moonlight.

coolcalm5 colors

More cool palettes

Preview

See it in context.

Interface

New

Ready when you are.

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

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

Data visualization

#2F2F2F#5F5F5F#8F8F8F#D0E0E0#F0F5F5

Palette guide

How to use Moonlit Desert Oasis

Overview

The Moonlit Desert Oasis palette offers a tranquil blend of cool grays and pale blues, depicting a serene desert landscape under the calm glow of moonlight. With its deep charcoal #2F2F2F, balanced mid-tones #5F5F5F and #8F8F8F, and ethereal light shades #D0E0E0 and #F0F5F5, this palette exudes a minimalist and sophisticated aura. Designers and developers can utilize this collection to create clean, modern, and calming interfaces or branding, emphasizing clarity, quiet elegance, and a sense of vast, open space, perfect for contemporary digital and print projects.

Best used for

Minimalist web design and app interfaces
Luxury product packaging and branding
Modern architectural portfolios
Tech startup branding (clean, sophisticated)
Serene digital art and photography backgrounds
High-end editorial layouts

Suggested color roles

primary

Use #2F2F2F as a strong, grounding color for main navigation, footers, or text, providing excellent contrast and depth.

secondary

Employ #5F5F5F for supporting content blocks, subheadings, or as a darker background for specific sections.

accent

Introduce #8F8F8F for subtle highlights, interactive elements, or decorative lines, offering a soft contrast.

background

The luminous #F0F5F5 serves as an ideal primary background, creating an expansive, clean, and airy canvas.

text

For light backgrounds like #F0F5F5, #2F2F2F or a dark charcoal ensures optimal readability. For dark backgrounds, a clean white or near-white is recommended.

Accessibility notes

The contrast between #2F2F2F and #F0F5F5 is excellent, ensuring high readability for all text sizes.
Ensure #5F5F5F on #F0F5F5 meets WCAG AA standards for body text. #8F8F8F on #F0F5F5 may be too light for small text.
Avoid using #8F8F8F on #D0E0E0 for text due to insufficient contrast.
For interactive elements, ensure focus states are clearly distinguishable from both normal and hover states using a contrasting color.

Recommended combinations

Oasis Depths

Ideal for striking hero sections, balancing strong anchors with expansive lightness.

#2F2F2F · #F0F5F5 · #8F8F8F

Desert Night

Perfect for secondary content areas, offering a softer, layered gray aesthetic.

#5F5F5F · #D0E0E0 · #2F2F2F

Pale Sands

Excellent for creating clean, minimalist layouts with subtle depth and contrast.

#F0F5F5 · #D0E0E0 · #2F2F2F

CSS variables

:root {
  --moonlit-desert-oasis-1: #2F2F2F;
  --moonlit-desert-oasis-2: #5F5F5F;
  --moonlit-desert-oasis-3: #8F8F8F;
  --moonlit-desert-oasis-4: #D0E0E0;
  --moonlit-desert-oasis-5: #F0F5F5;
}

Tailwind config

theme: {
  extend: {
    colors: {
      "moonlit-desert-oasis": {
        1: "#2F2F2F",
        2: "#5F5F5F",
        3: "#8F8F8F",
        4: "#D0E0E0",
        5: "#F0F5F5",
      }
    }
  }
}

Hex values

Color 1#2F2F2F

Color 2#5F5F5F

Color 3#8F8F8F

Color 4#D0E0E0

Color 5#F0F5F5

Accessibility

Contrast checker

2.1:1Fail

4.1:1AA18

9.8:1AAA

12.2:1AAA

2.1:1Fail

2:1Fail

4.7:1AA

5.8:1AA

4.1:1AA18

2:1Fail

2.4:1Fail

2.9:1Fail