Back to palettes

Palette

Cosmic Abyss Echo

A monochromatic deep space void, capturing the endless darkness and mystery of the universe.

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

#2C2F33#23262A#1B1D21#15171A#0D0F11

Palette guide

How to use Cosmic Abyss Echo

Overview

The Cosmic Abyss Echo palette is a monochromatic deep space void, capturing the endless darkness and mystery of the universe. It features an incredibly subtle gradient of near-black shades, from a very dark gray #2C2F33 to the profound #0D0F11. This ultra-dark palette is perfect for designs that demand a minimalist, sophisticated, and immersive aesthetic. It's ideal for dark mode interfaces, high-contrast typography, or any project aiming to evoke a sense of infinite depth and understated power, providing a sleek and modern foundation.

Best used for

  • Ultra dark mode UI/UX
  • Minimalist website designs
  • Luxury tech branding (understated)
  • Sci-fi themes (deep space)
  • Abstract art backgrounds
  • High-contrast typography showcases

Suggested color roles

primary

Use #0D0F11 for foundational backgrounds, providing the deepest possible dark base.

secondary

#1B1D21 can be used for subtle separators or containers, offering minimal distinction.

accent

#2C2F33 provides the lightest dark tone, suitable for subtle hover states or borders.

background

#0D0F11 is the ultimate choice for a deep, immersive dark background.

text

Pure white or a very light gray provides the necessary contrast and readability.

Accessibility notes

  • All colors are extremely dark; white or very light text is essential for readability.
  • The subtle differences between these shades are not suitable for distinguishing interactive elements solely by color.
  • Ensure all text and interactive elements have a WCAG AA or AAA contrast ratio with their background.
  • Avoid using any of these shades for text color against another dark shade within the palette.

Recommended combinations

Deepest Void

Ideal for foundational backgrounds, creating an immersive, infinite feel.

#0D0F11 · #15171A · #1B1D21

Subtle Layers

Excellent for subtle UI layering, card backgrounds, or separators in dark mode.

#1B1D21 · #23262A · #2C2F33

High Contrast Text

Primary background with the lightest dark shade for emphasis, paired with bright white text.

#0D0F11 · #2C2F33 · #1B1D21

CSS variables

:root {
  --cosmic-abyss-echo-1: #2C2F33;
  --cosmic-abyss-echo-2: #23262A;
  --cosmic-abyss-echo-3: #1B1D21;
  --cosmic-abyss-echo-4: #15171A;
  --cosmic-abyss-echo-5: #0D0F11;
}

Tailwind config

theme: {
  extend: {
    colors: {
      "cosmic-abyss-echo": {
        1: "#2C2F33",
        2: "#23262A",
        3: "#1B1D21",
        4: "#15171A",
        5: "#0D0F11",
      }
    }
  }
}

Related searches

monochromatic dark palettedeep black color schememinimalist dark UIcosmic void colorshigh contrast black grey

Palette colors

Hex values

Color 1#2C2F33
·
Color 2#23262A
·
Color 3#1B1D21
·
Color 4#15171A
·
Color 5#0D0F11
·

Accessibility

Contrast checker

1
2
3
4
5
1
1.1:1Fail
1.3:1Fail
1.3:1Fail
1.4:1Fail
2
1.1:1Fail
1.1:1Fail
1.2:1Fail
1.3:1Fail
3
1.3:1Fail
1.1:1Fail
1.1:1Fail
1.1:1Fail
4
1.3:1Fail
1.2:1Fail
1.1:1Fail
1.1:1Fail
5
1.4:1Fail
1.3:1Fail
1.1:1Fail
1.1:1Fail

Similar palettes

More like Cosmic Abyss Echo

View all dark
Dark Matter Swirl
Asteroid Drift Grey
Astral Dust Whisper
Celestial Dust Swirl
Celestial Shimmer Glow
Cosmic Deep Slumber