Back to palettes

Palette

Cobalt Midnight Sky

The profound, inky depths of the midnight sky, fading into vibrant cobalt hues as the stars emerge.

cooldark5 colors
More cool palettes

Preview

See it in context.

Interface

New

Ready when you are.

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

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

Data visualization

#0A1C2C#0E2B45#14406B#1B5D9D#347EC7

Palette guide

How to use Cobalt Midnight Sky

Overview

The Cobalt Midnight Sky palette captures the profound, inky depths of the midnight sky, fading into vibrant cobalt hues as the stars emerge. With colors ranging from the ultra-deep #0A1C2C to the striking #347EC7, this palette is perfect for designs that evoke mystery, tranquility, and celestial beauty. Designers can leverage #0E2B45 as a strong primary, while #14406B offers a versatile mid-tone for diverse applications. The brightest hue, #1B5D9D, provides a compelling highlight. This palette is ideal for projects that aim for a sophisticated, calm, and immersive visual experience, from astronomy-themed sites to luxury branding.

Best used for

  • Astronomy and space-related websites
  • Luxury branding (e.g., watches, spirits)
  • Nightlife and entertainment event promotion
  • Meditation and sleep aid apps
  • Science fiction book covers or game aesthetics
  • High-end corporate presentations

Suggested color roles

primary

#0E2B45 - A deep, authoritative blue that serves as a commanding primary, ideal for main headings, brand logos, or core UI elements, conveying depth and trust.

secondary

#14406B - A slightly lighter, yet still deep blue, suitable for subheadings, secondary navigation, or supporting graphics, adding subtle contrast.

accent

#347EC7 - A bright, clear blue that provides a striking highlight, perfect for interactive elements, key data points, or subtle background textures, evoking distant stars.

background

#0A1C2C - An intensely dark, almost black-blue, creating an immersive, sophisticated backdrop that enhances the luminosity of lighter blues.

text

For text on #0A1C2C, #0E2B45, or #14406B, use #347EC7 or white for optimal readability. For text on #347EC7, use black or #0A1C2C.

Accessibility notes

  • Ensure high contrast when placing light text, such as #347EC7, on darker blues like #0A1C2C or #0E2B45.
  • Avoid using #1B5D9D for small text on #14406B without verifying WCAG AA compliance due to similar luminance values.
  • The brightest hue, #347EC7, offers excellent contrast against all darker blues in the palette for interactive elements.
  • When using #347EC7 as a background, ensure text is in a contrasting dark color like black or #0A1C2C to maintain legibility.

Recommended combinations

Stellar Glow

Creates a dramatic, celestial interface; #0A1C2C for background, #14406B for content, #347EC7 for luminous highlights/CTAs.

#0A1C2C · #14406B · #347EC7

Cosmic Drift

Use #0E2B45 for main sections, #1B5D9D for supporting elements, and #347EC7 for vibrant accents or delicate details.

#0E2B45 · #1B5D9D · #347EC7

Deep Nebula

Ideal for creating depth through gradients or layered UI, moving from the deepest blue to a rich, true blue.

#0A1C2C · #0E2B45 · #14406B

CSS variables

:root {
  --cobalt-midnight-sky-1: #0A1C2C;
  --cobalt-midnight-sky-2: #0E2B45;
  --cobalt-midnight-sky-3: #14406B;
  --cobalt-midnight-sky-4: #1B5D9D;
  --cobalt-midnight-sky-5: #347EC7;
}

Tailwind config

theme: {
  extend: {
    colors: {
      "cobalt-midnight-sky": {
        1: "#0A1C2C",
        2: "#0E2B45",
        3: "#14406B",
        4: "#1B5D9D",
        5: "#347EC7",
      }
    }
  }
}

Related searches

midnight blue color schemecelestial blue palettedark elegant colorsspace themed brandingdeep cool UI design

Palette colors

Hex values

Color 1#0A1C2C
·
Color 2#0E2B45
·
Color 3#14406B
·
Color 4#1B5D9D
·
Color 5#347EC7
·

Accessibility

Contrast checker

1
2
3
4
5
1
1.2:1Fail
1.6:1Fail
2.5:1Fail
4.1:1AA18
2
1.2:1Fail
1.4:1Fail
2.1:1Fail
3.4:1AA18
3
1.6:1Fail
1.4:1Fail
1.6:1Fail
2.5:1Fail
4
2.5:1Fail
2.1:1Fail
1.6:1Fail
1.6:1Fail
5
4.1:1AA18
3.4:1AA18
2.5:1Fail
1.6:1Fail

Similar palettes

More like Cobalt Midnight Sky

View all cool
Deep Space Mariner
Abyssal Current Glide
Bioluminescent Abyss
Cobalt Abyss Depths
Cosmic Ocean Deep
Deep Ocean Currents