Palette

Cosmic Night Hues

Deep blues and purples evoke the mysterious and boundless beauty of the cosmic night sky.

CoolDark5 colors

More Cool palettes

Preview

See it in context.

Interface

New

Ready when you are.

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

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

Data visualization

#1A237E#283593#3F51B5#7986CB#C5CAE9

Palette guide

How to use Cosmic Night Hues

Overview

The Cosmic Night Hues palette evokes the mysterious and boundless beauty of the cosmic night sky with deep blues and purples. It flows harmoniously from the profound #1A237E (dark indigo) and #283593 (deep sapphire) through the rich #3F51B5 (royal blue) and the softer #7986CB (periwinkle). The palette culminates in the serene #C5CAE9 (light lavender-blue), offering a celestial glow. This cool and dark collection is perfect for designers and developers crafting serene, sophisticated, or trustworthy digital experiences. It excels in creating atmospheric backgrounds, professional branding, and UI elements that convey depth, tranquility, and a timeless celestial feel.

Best used for

Professional dark mode app interfaces and websites
Corporate branding with a sophisticated, calm appeal
Celestial-themed digital art and illustrations
Educational content about astronomy and space
Luxury product packaging and marketing
Serene environmental graphics and presentations

Suggested color roles

primary

Utilize #1A237E as a deep, anchoring background color, establishing a calm, professional canvas for celestial elements.

secondary

Employ #283593 or #3F51B5 for significant content areas, subheadings, or distinct sections, offering rich, supporting blue tones.

accent

Apply #7986CB for subtle highlights, interactive states, or as a secondary text color on dark backgrounds, adding a touch of sophisticated blue.

background

The darker blues like #1A237E and #283593 are ideal for expansive, tranquil backdrops, while #C5CAE9 can be used for subtle, glowing elements or light mode accents.

text

For optimal readability on dark backgrounds like #1A237E or #283593, use #C5CAE9 or a crisp white. A deep charcoal or black provides excellent contrast on #7986CB or #C5CAE9.

Accessibility notes

Ensure sufficient contrast between #C5CAE9 and the darker background colors, especially for body text.
White text on #1A237E, #283593, and #3F51B5 generally provides good readability.
Avoid using #7986CB as a text color on #3F51B5 due to potential low contrast; reserve it for larger UI elements.
Test color combinations for legibility across various screen types and lighting conditions to maintain the desired mood.

Recommended combinations

Deep Cosmos Blue

Creates a deep, harmonious blue gradient, perfect for professional backgrounds or subtly layered UI designs.

#1A237E · #283593 · #3F51B5

Celestial Glow

Ideal for subtle gradients, ethereal overlays, or conveying a soft, luminous glow in illustrations and decorative elements.

#3F51B5 · #7986CB · #C5CAE9

Night Sky Contrast

Excellent for establishing clear hierarchy, with a light highlight against a dark canvas, enhanced by a serene blue accent.

#1A237E · #C5CAE9 · #7986CB

CSS variables

:root {
  --cosmic-night-hues-1: #1A237E;
  --cosmic-night-hues-2: #283593;
  --cosmic-night-hues-3: #3F51B5;
  --cosmic-night-hues-4: #7986CB;
  --cosmic-night-hues-5: #C5CAE9;
}

Tailwind config

theme: {
  extend: {
    colors: {
      "cosmic-night-hues": {
        1: "#1A237E",
        2: "#283593",
        3: "#3F51B5",
        4: "#7986CB",
        5: "#C5CAE9",
      }
    }
  }
}

Hex values

Color 1#1A237E

Color 2#283593

Color 3#3F51B5

Color 4#7986CB

Color 5#C5CAE9

Accessibility

Contrast checker

1.3:1Fail

1.9:1Fail

3.8:1AA18

8.2:1AAA

1.3:1Fail

1.5:1Fail

3:1AA18

6.4:1AA

1.9:1Fail

1.5:1Fail

2:1Fail

4.3:1AA18

3.8:1AA18

3:1AA18

2:1Fail

2.1:1Fail

8.2:1AAA

6.4:1AA

4.3:1AA18

2.1:1Fail

Similar palettes

More like Cosmic Night Hues