Palette

Stellar Void Gaze

A deep and profound blue spectrum, peering into the silent, star-filled depths of the stellar void.

darkdark5 colors

More dark palettes

Preview

See it in context.

Interface

New

Ready when you are.

A quick look at how Stellar Void 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 Stellar Void Gaze.

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

Data visualization

#1A1A2E#283C5A#4E6F8E#7B9AB9#0D0D1A

Palette guide

How to use Stellar Void Gaze

Overview

The Stellar Void Gaze palette presents a profound and mysterious blue spectrum, designed to evoke the silent, star-filled depths of the cosmos. Ranging from the ultra-dark #0D0D1A to the deep #1A1A2E, it introduces rich blues like #283C5A and #4E6F8E, with the ethereal #7B9AB9 offering a delicate contrast. This palette is an exceptional tool for designers and developers seeking to create immersive, sophisticated, and contemplative digital experiences. It’s particularly well-suited for interfaces that require a professional yet intriguing aesthetic, providing depth and focus without visual clutter, perfect for astronomy or data-rich applications.

Best used for

Astronomy and space exploration apps
Corporate dashboards and analytics
Elegant dark mode themes
Educational science platforms
Mysterious branding and marketing
High-tech product interfaces

Suggested color roles

primary

Utilize #0D0D1A as the foundational background color for main sections, creating a truly deep, immersive void.

secondary

Employ #1A1A2E for secondary panels, cards, or subtle divisions, offering a slight variation in depth.

accent

Apply #7B9AB9 as a light accent for interactive elements, highlights, or key data points, ensuring visibility.

background

The profound #0D0D1A is the ideal background, setting a serious and sophisticated cosmic tone.

text

For primary text on dark backgrounds, use #7B9AB9 or white for excellent legibility. For secondary text, #4E6F8E works well.

Accessibility notes

Ensure sufficient contrast for text, especially when using #4E6F8E on #283C5A; consider larger font sizes.
Verify that interactive elements with #7B9AB9 have clear focus states against the dark backgrounds.
Avoid using #0D0D1A and #1A1A2E for small, critical text elements due to their extremely low contrast.
Test text readability on various screens and lighting conditions to maintain comfort and clarity.

Recommended combinations

Void Depths

Ideal for main content areas, providing a deep, dark base with clear, readable text and accents.

#0D0D1A · #1A1A2E · #7B9AB9

Stellar Drift

Excellent for creating hierarchical content, subtle gradients, or sequential information display.

#1A1A2E · #283C5A · #4E6F8E

Cosmic Glimmer

Great for prominent headings, calls-to-action, or hero sections that need to stand out with elegance.

#0D0D1A · #4E6F8E · #7B9AB9

CSS variables

:root {
  --stellar-void-gaze-1: #1A1A2E;
  --stellar-void-gaze-2: #283C5A;
  --stellar-void-gaze-3: #4E6F8E;
  --stellar-void-gaze-4: #7B9AB9;
  --stellar-void-gaze-5: #0D0D1A;
}

Tailwind config

theme: {
  extend: {
    colors: {
      "stellar-void-gaze": {
        1: "#1A1A2E",
        2: "#283C5A",
        3: "#4E6F8E",
        4: "#7B9AB9",
        5: "#0D0D1A",
      }
    }
  }
}

Hex values

Color 1#1A1A2E

Color 2#283C5A

Color 3#4E6F8E

Color 4#7B9AB9

Color 5#0D0D1A

Accessibility

Contrast checker

1.5:1Fail

3.2:1AA18

5.8:1AA

1.1:1Fail

1.5:1Fail

2.1:1Fail

3.8:1AA18

1.7:1Fail

3.2:1AA18

2.1:1Fail

1.8:1Fail

3.7:1AA18

5.8:1AA

3.8:1AA18

1.8:1Fail

6.6:1AA

1.1:1Fail

1.7:1Fail

3.7:1AA18

6.6:1AA

Similar palettes

More like Stellar Void Gaze

Cosmic Stardust Drift

Dark Matter Shroud