Back to palettes

Palette

Cosmic Abyss Gaze

A journey from the deep void to distant stellar dust, capturing the vastness of space.

darkdark5 colors
More dark palettes

Preview

See it in context.

Interface

New

Ready when you are.

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

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

Data visualization

#0D1B2A#1B263B#415A77#778DA9#E0E1DD

Palette guide

How to use Cosmic Abyss Gaze

Overview

The Cosmic Abyss Gaze palette takes you on a journey from the deep void to distant stellar dust, capturing the vastness of space. It transitions from profound dark blues like #0D1B2A and #1B263B, through a medium Slate Gray #415A77 and a lighter Cadet Blue #778DA9, culminating in a shimmering light gray #E0E1DD. This sophisticated dark-to-light gradient is perfect for designs that aim to evoke mystery, scientific elegance, and the serene beauty of the cosmos, ideal for astronomy, tech, or modern branding.

Best used for

  • Astronomy and space science websites
  • Tech product interfaces
  • Dark mode UI/UX with subtle gradients
  • Educational content about the universe
  • Sophisticated digital art
  • Branding for innovative startups

Suggested color roles

primary

Use #0D1B2A for foundational backgrounds, providing a deep, stable cosmic base.

secondary

#1B263B can be used for sub-sections or containers, offering a subtle depth.

accent

#E0E1DD provides a bright, ethereal highlight for important details, mimicking starlight.

background

#0D1B2A or #1B263B for a rich, dark, and immersive background.

text

White or the lightest gray #E0E1DD provides optimal readability against the darker colors.

Accessibility notes

  • #E0E1DD is the lightest color; it will require dark text if used as a background for text.
  • The darker colors (#0D1B2A, #1B263B, #415A77) provide excellent contrast with white or very light text.
  • Ensure sufficient contrast for any text placed on #778DA9.
  • Always verify contrast ratios for all text and interactive elements.

Recommended combinations

Galactic Depths

Ideal for foundational elements, dark backgrounds, or creating a sense of profound depth.

#0D1B2A · #1B263B · #415A77

Stellar Glow

Excellent for highlights, interactive elements, or text that needs to stand out against darkness.

#E0E1DD · #778DA9 · #415A77

Cosmic Gradient

Use for creating smooth transitions, overlays, or subtle depth in UI elements.

#1B263B · #415A77 · #778DA9

CSS variables

:root {
  --cosmic-abyss-gaze-1: #0D1B2A;
  --cosmic-abyss-gaze-2: #1B263B;
  --cosmic-abyss-gaze-3: #415A77;
  --cosmic-abyss-gaze-4: #778DA9;
  --cosmic-abyss-gaze-5: #E0E1DD;
}

Tailwind config

theme: {
  extend: {
    colors: {
      "cosmic-abyss-gaze": {
        1: "#0D1B2A",
        2: "#1B263B",
        3: "#415A77",
        4: "#778DA9",
        5: "#E0E1DD",
      }
    }
  }
}

Related searches

dark blue space palettecosmic galaxy colorsdeep nebula schemeelegant dark mode UIastronomy website colors

Palette colors

Hex values

Color 1#0D1B2A
·
Color 2#1B263B
·
Color 3#415A77
·
Color 4#778DA9
·
Color 5#E0E1DD
·

Accessibility

Contrast checker

1
2
3
4
5
1
1.1:1Fail
2.4:1Fail
5.1:1AA
13.2:1AAA
2
1.1:1Fail
2.1:1Fail
4.4:1AA18
11.5:1AAA
3
2.4:1Fail
2.1:1Fail
2.1:1Fail
5.4:1AA
4
5.1:1AA
4.4:1AA18
2.1:1Fail
2.6:1Fail
5
13.2:1AAA
11.5:1AAA
5.4:1AA
2.6:1Fail

Similar palettes

More like Cosmic Abyss Gaze

View all dark
Celestial Dust Swirl
Celestial Star Veil
Celestial Void Gaze
Cosmic Abyss Echo
Cosmic Dust Shimmer
Cosmic Dust Trail