Palette

Cobalt Night Sky

Gazing up at an expansive night sky, illuminated by distant stars and deep blue cosmic dust.

coolcalm5 colors

More cool palettes

Preview

See it in context.

Interface

New

Ready when you are.

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

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

Data visualization

#00008B#191970#4169E1#7B68EE#00BFFF

Palette guide

How to use Cobalt Night Sky

Overview

The Cobalt Night Sky palette captures the expansive beauty of a night sky, illuminated by distant stars and deep blue cosmic dust. With hues ranging from the profound #00008B to the vibrant #00BFFF, this palette is perfect for designs evoking tranquility, mystery, and celestial wonder. Designers can leverage #191970 as a strong primary, while #4169E1 offers a vivid mid-tone for dynamic elements. The unique #7B68EE adds a touch of medium purple-blue. This palette is ideal for projects that aim to combine classic depth with an ethereal, inviting appeal, from astronomy-themed sites to luxury branding.

Best used for

Astronomy and space-related websites
Luxury travel experiences (e.g., stargazing tours)
Nightlife and entertainment event promotion
Meditation and wellness apps
Science fiction book covers or game aesthetics
High-end corporate presentations

Suggested color roles

primary

#191970 - A deep, sophisticated navy that establishes authority and elegance, ideal for main headings, brand logos, or foundational UI elements.

secondary

#4169E1 - A vibrant, true blue that provides an energetic contrast, suitable for subheadings, active states, or supporting graphical elements.

accent

#00BFFF - A vivid, bright sky blue that offers a striking highlight, perfect for interactive elements, small icons, or subtle background textures, evoking starlight.

background

#00008B - An intense, dark navy that creates a deep, luxurious backdrop, allowing lighter blues to truly pop with vibrancy.

text

For text on #00008B or #191970, use #00BFFF or white for optimal readability. For text on #00BFFF, use black or #00008B.

Accessibility notes

Ensure high contrast when placing light text, such as #00BFFF, on darker blues like #00008B or #191970.
Avoid using #7B68EE for small text on #4169E1 without verifying WCAG AA compliance due to similar luminance values.
The brightest hue, #00BFFF, offers excellent contrast against all darker blues in the palette for interactive elements.
When using #00BFFF as a background, ensure text is in a contrasting dark color like black or #00008B to maintain legibility.

Recommended combinations

Cosmic Dust

Creates a dramatic, celestial interface; #00008B for background, #4169E1 for content, #00BFFF for luminous highlights/CTAs.

#00008B · #4169E1 · #00BFFF

Starlight Trail

Use #191970 for main sections, #7B68EE for supporting elements, and #00BFFF for vibrant accents or delicate details.

#191970 · #7B68EE · #00BFFF

Deep Indigo

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

#00008B · #191970 · #4169E1

CSS variables

:root {
  --cobalt-night-sky-1: #00008B;
  --cobalt-night-sky-2: #191970;
  --cobalt-night-sky-3: #4169E1;
  --cobalt-night-sky-4: #7B68EE;
  --cobalt-night-sky-5: #00BFFF;
}

Tailwind config

theme: {
  extend: {
    colors: {
      "cobalt-night-sky": {
        1: "#00008B",
        2: "#191970",
        3: "#4169E1",
        4: "#7B68EE",
        5: "#00BFFF",
      }
    }
  }
}

Hex values

Color 1#00008B

Color 2#191970

Color 3#4169E1

Color 4#7B68EE

Color 5#00BFFF

Accessibility

Contrast checker

1:1Fail

3.2:1AA18

3.7:1AA18

7.2:1AAA

1:1Fail

3.1:1AA18

3.6:1AA18

7:1AA

3.2:1AA18

3.1:1AA18

1.2:1Fail

2.3:1Fail

3.7:1AA18

3.6:1AA18

1.2:1Fail

2:1Fail

7.2:1AAA

7:1AA

2.3:1Fail

2:1Fail

Similar palettes

More like Cobalt Night Sky

Celestial Ocean Dream

Celestial Ocean Mirror