Back to palettes

Palette

Midnight Hues

A journey through the deepest blues of a midnight sky, fading into distant, soft twilight.

DarkElegant5 colors
More Dark palettes

Preview

See it in context.

Interface

New

Ready when you are.

A quick look at how Midnight Hues 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 Midnight Hues.

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

Data visualization

#0F0F2D#2C3E50#465F6F#89A8C0#C2D5E0

Palette guide

How to use Midnight Hues

Overview

The Midnight Hues palette embarks on a journey through the deepest blues of a midnight sky, gradually fading into soft, distant twilight. Starting with the profound #0F0F2D, it elegantly transitions through #2C3E50 and #465F6F, culminating in the ethereal #89A8C0 and #C2D5E0. This sophisticated gradient of cool tones offers designers and developers a versatile tool for creating serene, professional, and immersive digital experiences. The palette's strength lies in its harmonious progression, allowing for nuanced depth and visual interest across various applications, from corporate branding to tranquil digital art. It perfectly encapsulates a sense of calm and expansive depth.

Best used for

  • Corporate branding and professional websites
  • Educational platforms and e-learning interfaces
  • Tranquil digital art and atmospheric illustrations
  • Sophisticated web UI and dark mode themes
  • Architectural visualization and abstract design
  • Meditation or wellness app aesthetics

Suggested color roles

primary

Utilize #0F0F2D as the dominant foundational color for deep, stable backgrounds.

secondary

Apply #2C3E50 for supporting sections, subheadings, or subtle background patterns to add depth.

accent

Employ #C2D5E0 for soft highlights, interactive elements, or to simulate distant light sources.

background

The deepest #0F0F2D or #2C3E50 provides an immersive and elegant dark canvas.

text

Pair light text colors like #C2D5E0 or pure white (e.g., #FFFFFF) against the darker backgrounds for optimal legibility.

Accessibility notes

  • Ensure sufficient contrast when using #465F6F for text on backgrounds like #2C3E50; larger text is recommended.
  • Prioritize #C2D5E0 for essential text and interactive elements to meet WCAG contrast guidelines on dark surfaces.
  • Avoid using #2C3E50 for small text on #0F0F2D, as the contrast may be insufficient for readability.
  • When designing gradients, ensure text placed over them maintains consistent and accessible contrast levels throughout.

Recommended combinations

Deep Twilight

Excellent for primary dark backgrounds with a rich supporting color and a bright, ethereal highlight for text or icons.

#0F0F2D · #2C3E50 · #C2D5E0

Sky Gradient

Creates a smooth, atmospheric gradient effect, ideal for hero sections or layered UI elements.

#2C3E50 · #465F6F · #89A8C0

Distant Glow

Provides strong contrast for key information or visual elements against a deep, stable base.

#0F0F2D · #89A8C0 · #C2D5E0

CSS variables

:root {
  --midnight-hues-1: #0F0F2D;
  --midnight-hues-2: #2C3E50;
  --midnight-hues-3: #465F6F;
  --midnight-hues-4: #89A8C0;
  --midnight-hues-5: #C2D5E0;
}

Tailwind config

theme: {
  extend: {
    colors: {
      "midnight-hues": {
        1: "#0F0F2D",
        2: "#2C3E50",
        3: "#465F6F",
        4: "#89A8C0",
        5: "#C2D5E0",
      }
    }
  }
}

Related searches

deep blue grey palettemidnight sky colorsserene blue gradientscorporate dark blueelegant cool tones

Palette colors

Hex values

Color 1#0F0F2D
·
Color 2#2C3E50
·
Color 3#465F6F
·
Color 4#89A8C0
·
Color 5#C2D5E0
·

Accessibility

Contrast checker

1
2
3
4
5
1
1.7:1Fail
2.8:1Fail
7.5:1AAA
12.3:1AAA
2
1.7:1Fail
1.6:1Fail
4.4:1AA18
7.3:1AAA
3
2.8:1Fail
1.6:1Fail
2.7:1Fail
4.4:1AA18
4
7.5:1AAA
4.4:1AA18
2.7:1Fail
1.6:1Fail
5
12.3:1AAA
7.3:1AAA
4.4:1AA18
1.6:1Fail

Similar palettes

More like Midnight Hues

View all Dark
Midnight Sky Aura
Art Deco Sapphire
Aurora Borealis Dream
Celestial Dust Cloud
Velvet Midnight Lounge
Amethyst Star Cluster