Back to palettes

Palette

Cosmic Abyss Echo

Plunge into the depths of cosmic darkness with this blend of profound blues and elusive greys.

darkdark5 colors
More dark palettes

Preview

See it in context.

Interface

New

Ready when you are.

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

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

Data visualization

#0D0F1A#1C2336#33425F#5A7090#8FA0C0

Palette guide

How to use Cosmic Abyss Echo

Overview

The Cosmic Abyss Echo palette plunges into the depths of cosmic darkness with a blend of profound blues and elusive greys. It transitions from the near-black #0D0F1A and deep #1C2336, through a rich #33425F, to lighter, ethereal tones like #5A7090 and #8FA0C0, reminiscent of distant starlight. This sophisticated dark palette is perfect for designs that aim to evoke mystery, vastness, and a modern, technical feel. It's ideal for sci-fi themes, sophisticated digital interfaces, or branding that requires a sense of depth and understated elegance.

Best used for

  • Sci-fi game interfaces
  • Astronomy website designs
  • Dark mode UI themes
  • Luxury tech product branding
  • Space exploration documentaries
  • Abstract digital art

Suggested color roles

primary

Use #0D0F1A for foundational backgrounds, providing a deep, immersive cosmic void.

secondary

#1C2336 can be used for sub-sections or containers, offering a subtle variation in darkness.

accent

#8FA0C0 provides a light, ethereal highlight for important details or interactive elements, mimicking distant stars.

background

#0D0F1A or #1C2336 for a rich, dark, and sophisticated base.

text

White or a very light gray (like #8FA0C0) provides optimal readability against the darker colors.

Accessibility notes

  • #8FA0C0 is the lightest color; it will require dark text if used as a background for text.
  • The darker colors (#0D0F1A, #1C2336, #33425F) provide excellent contrast with white or very light text.
  • Ensure sufficient contrast for any text placed on #5A7090.
  • Always verify contrast ratios for all text and interactive elements.

Recommended combinations

Deep Space

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

#0D0F1A · #1C2336 · #33425F

Starlight Echo

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

#8FA0C0 · #5A7090 · #33425F

Subtle Gradient

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

#1C2336 · #33425F · #5A7090

CSS variables

:root {
  --cosmic-abyss-echo-2-1: #0D0F1A;
  --cosmic-abyss-echo-2-2: #1C2336;
  --cosmic-abyss-echo-2-3: #33425F;
  --cosmic-abyss-echo-2-4: #5A7090;
  --cosmic-abyss-echo-2-5: #8FA0C0;
}

Tailwind config

theme: {
  extend: {
    colors: {
      "cosmic-abyss-echo-2": {
        1: "#0D0F1A",
        2: "#1C2336",
        3: "#33425F",
        4: "#5A7090",
        5: "#8FA0C0",
      }
    }
  }
}

Related searches

dark blue grey palettecosmic space colorsdeep abyss schemesophisticated dark modesci-fi UI colors

Palette colors

Hex values

Color 1#0D0F1A
·
Color 2#1C2336
·
Color 3#33425F
·
Color 4#5A7090
·
Color 5#8FA0C0
·

Accessibility

Contrast checker

1
2
3
4
5
1
1.2:1Fail
1.9:1Fail
3.8:1AA18
7.2:1AAA
2
1.2:1Fail
1.6:1Fail
3.1:1AA18
5.9:1AA
3
1.9:1Fail
1.6:1Fail
2:1Fail
3.8:1AA18
4
3.8:1AA18
3.1:1AA18
2:1Fail
1.9:1Fail
5
7.2:1AAA
5.9:1AA
3.8:1AA18
1.9:1Fail

Similar palettes

More like Cosmic Abyss Echo

View all dark
Bioluminescent Deep Trench
Celestial Abyss Gaze
Deep Ocean Caverns
Deep Sea Explorer
Deep Space Abyss
Galactic Void Gaze