Palette

Cosmic Starlight Gaze

Profound blues and deep indigos that echo the vast, star-studded expanse of the night sky.

darkdark5 colors

More dark palettes

Preview

See it in context.

Interface

New

Ready when you are.

A quick look at how Cosmic Starlight Gaze 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 Starlight Gaze.

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

Data visualization

#0D0F1A#272C42#414A69#5C6991#7787B8

Palette guide

How to use Cosmic Starlight Gaze

Overview

The Cosmic Starlight Gaze palette captures the serene and vast expanse of the night sky, focusing on deep, nuanced blues. It begins with the profound #0D0F1A, progressing through the rich #272C42 and the sophisticated #414A69. Lighter shades like #5C6991 and the ethereal #7787B8 complete the spectrum, evoking distant starlight against a velvet canvas. This palette is ideal for designs that aim for a sophisticated, calming, and expansive feel, perfect for corporate branding, educational platforms, or any project seeking a sense of depth and tranquility.

Best used for

Corporate website design with a serious tone
Educational platforms and e-learning interfaces
Science and technology branding
Space-themed applications and games
Elegant presentation templates
Editorial layouts needing a calm, authoritative feel

Suggested color roles

primary

Use #0D0F1A as the foundational background for a deep, immersive experience, perfect for large areas.

secondary

Apply #272C42 for secondary backgrounds, panels, or navigation, providing subtle structure.

accent

Utilize #7787B8 for highlighting key information, interactive elements, or a calming visual accent.

background

The darker blues like #0D0F1A and #272C42 create powerful, deep backgrounds.

text

For body text, use #7787B8 or #5C6991 against the darker backgrounds. For headings, a crisp white works well.

Accessibility notes

Ensure #7787B8 and #5C6991 provide sufficient contrast when used as text on #0D0F1A, #272C42, and #414A69 backgrounds.
Avoid using #414A69 text on #272C42 backgrounds for small text, as contrast might be low.
When using these blues for data visualization, ensure distinct enough shades for colorblind users.
Consider providing a pure white text option for maximum legibility on the darkest backgrounds.

Recommended combinations

Deep Night UI

Creates a sophisticated dark mode UI with a profound background, a slightly lighter panel, and a clear, readable text color.

#0D0F1A · #272C42 · #7787B8

Starlight Accent

Ideal for layered elements, offering depth with a soft blue accent for interactive components or icons.

#272C42 · #414A69 · #7787B8

Elegant Gradient

Perfect for subtle background gradients or visual storytelling, moving from deep night to softer twilight.

#0D0F1A · #414A69 · #5C6991

CSS variables

:root {
  --cosmic-starlight-gaze-1: #0D0F1A;
  --cosmic-starlight-gaze-2: #272C42;
  --cosmic-starlight-gaze-3: #414A69;
  --cosmic-starlight-gaze-4: #5C6991;
  --cosmic-starlight-gaze-5: #7787B8;
}

Tailwind config

theme: {
  extend: {
    colors: {
      "cosmic-starlight-gaze": {
        1: "#0D0F1A",
        2: "#272C42",
        3: "#414A69",
        4: "#5C6991",
        5: "#7787B8",
      }
    }
  }
}

Hex values

Color 1#0D0F1A

Color 2#272C42

Color 3#414A69

Color 4#5C6991

Color 5#7787B8

Accessibility

Contrast checker

1.4:1Fail

2.2:1Fail

3.5:1AA18

5.4:1AA

1.4:1Fail

1.6:1Fail

2.5:1Fail

3.9:1AA18

2.2:1Fail

1.6:1Fail

2.5:1Fail

3.5:1AA18

2.5:1Fail

1.6:1Fail

1.5:1Fail

5.4:1AA

3.9:1AA18

2.5:1Fail

1.5:1Fail

Similar palettes

More like Cosmic Starlight Gaze

Cosmic Starlight Gaze

See it in context.

Ready when you are.

Built with Cosmic Starlight Gaze.

How to use Cosmic Starlight Gaze

Overview

Best used for

Suggested color roles

Accessibility notes

Recommended combinations

Deep Night UI

Starlight Accent

Elegant Gradient

CSS variables

Tailwind config

Related searches

Hex values

Contrast checker

More like Cosmic Starlight Gaze