Palette

Deep Space Abyss

Intense blues and deep indigos plunge into the mysteries of the vast, silent cosmic ocean.

darkdark5 colors

More dark palettes

Preview

See it in context.

Interface

New

Ready when you are.

A quick look at how Deep Space Abyss 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 Deep Space Abyss.

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

Data visualization

#000033#000066#191970#4169E1#6495ED

Palette guide

How to use Deep Space Abyss

Overview

The Deep Space Abyss palette plunges into the boundless mysteries of the cosmos, presenting a captivating array of deep blues and indigos. From the profoundly dark #000033 to the striking vibrancy of #6495ED, this palette perfectly balances depth with ethereal light, mimicking distant galaxies and celestial phenomena. It's a powerful tool for designers and developers seeking to evoke wonder, tranquility, and futuristic sophistication. Ideal for projects that require a sense of vastness, technological advancement, or serene contemplation, its cool, rich tones create an immersive and engaging visual experience.

Best used for

Astronomy or space exploration websites
Sci-fi movie interfaces and promotional art
Meditation and mindfulness apps
Tech startup branding
Gaming UI for cosmic-themed titles
Dark mode themes with a celestial feel

Suggested color roles

primary

#191970 - A rich, deep indigo, perfect for main content areas, navigation, or strong branding elements, conveying stability and depth.

secondary

#000066 - A dark, profound navy, ideal for secondary backgrounds, dividers, or subtle graphical accents, adding layered complexity.

accent

#6495ED - A bright, sky-blue, providing a luminous highlight for interactive elements, calls-to-action, or important notifications, drawing the eye effectively.

background

#000033 - The deepest, almost black-blue, serving as an expansive, silent cosmic backdrop for the entire design.

text

#6495ED - For primary text on dark backgrounds, ensuring excellent legibility and a consistent celestial aesthetic.

Accessibility notes

Ensure #6495ED text on #000033, #000066, or #191970 backgrounds meets WCAG AA contrast standards for readability.
Avoid using #4169E1 for small text on dark blue backgrounds, as contrast might be insufficient for some users.
Use the brightest blue, #6495ED, for all critical text and interactive elements to ensure maximum visibility.
Consider providing alternatives for color-coding information, as distinguishing between the darker blues might be challenging for some.

Recommended combinations

Cosmic Depths

Creates a deep, layered background effect, perfect for immersive hero sections or full-screen experiences.

#000033 · #000066 · #191970

Starlight Glimmer

Excellent for data visualization or progress indicators, moving from deep blue to bright highlight.

#191970 · #4169E1 · #6495ED

Galactic Contrast

Ideal for clear content hierarchy, with #000033 as the panel background, #6495ED for headings, and #4169E1 for supporting text.

#000033 · #6495ED · #4169E1

CSS variables

:root {
  --deep-space-abyss-1: #000033;
  --deep-space-abyss-2: #000066;
  --deep-space-abyss-3: #191970;
  --deep-space-abyss-4: #4169E1;
  --deep-space-abyss-5: #6495ED;
}

Tailwind config

theme: {
  extend: {
    colors: {
      "deep-space-abyss": {
        1: "#000033",
        2: "#000066",
        3: "#191970",
        4: "#4169E1",
        5: "#6495ED",
      }
    }
  }
}

Hex values

Color 1#000033

Color 2#000066

Color 3#191970

Color 4#4169E1

Color 5#6495ED

Accessibility

Contrast checker

1.1:1Fail

1.3:1Fail

4.1:1AA18

6.7:1AA

1.1:1Fail

1.2:1Fail

3.6:1AA18

5.9:1AA

1.3:1Fail

1.2:1Fail

3.1:1AA18

5:1AA

4.1:1AA18

3.6:1AA18

3.1:1AA18

1.6:1Fail

6.7:1AA

5.9:1AA

5:1AA

1.6:1Fail

Similar palettes

More like Deep Space Abyss

Galactic Void Shimmer

Midnight Star Veil