Back to palettes

Palette

Starlight Abyss Ink

The infinite mystery of the cosmic abyss, dotted with distant, twinkling stars.

darkdark5 colors
More dark palettes

Preview

See it in context.

Interface

New

Ready when you are.

A quick look at how Starlight Abyss Ink 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 Starlight Abyss Ink.

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

Data visualization

#0A0F1A#1E2A3A#0C122C#2A3E4A#CCCCCC

Palette guide

How to use Starlight Abyss Ink

Overview

The Starlight Abyss Ink palette plunges into the infinite mystery of the cosmic abyss, combining deep, enigmatic blues and greys with a striking starlight accent. Anchored by the profound #0A0F1A and illuminated by the bright #CCCCCC, this collection is perfect for designers and developers crafting dramatic, high-contrast interfaces. It evokes a sense of deep space, making it ideal for sci-fi themes, luxury branding, or any project requiring a powerful, mysterious aesthetic. The subtle variations between #1E2A3A and #0C122C provide depth, ensuring that even in darkness, there's a rich, nuanced visual experience.

Best used for

  • Sci-fi game UI and concept art
  • Cybersecurity product branding
  • Luxury watch or jewelry websites
  • Film noir aesthetic designs
  • Data center dashboards
  • Event posters for dark-themed parties

Suggested color roles

primary

#0A0F1A serves as the absolute darkest base, perfect for immersive backgrounds in dark mode interfaces.

secondary

#1E2A3A provides a rich, supporting dark grey-blue, adding subtle variation and depth.

accent

#CCCCCC is the crucial starlight highlight, providing excellent contrast for text and interactive elements.

background

Use #0A0F1A or #0C122C for a truly dark, immersive background, allowing lighter elements to pop.

text

For optimal readability, #CCCCCC should be used for all text on the dark backgrounds in this palette.

Accessibility notes

  • The light #CCCCCC offers excellent contrast against all dark colors in this palette, ensuring readability.
  • Avoid using the dark blues/greys for text on each other, as their contrast is too low for accessibility.
  • Ensure interactive elements are clearly distinguishable by utilizing #CCCCCC for states or outlines.
  • The subtle differences between #0A0F1A, #0C122C, #1E2A3A, and #2A3E4A are for depth, not for distinct content separation.

Recommended combinations

Dramatic Contrast

Ideal for prominent headers, key information, and impactful call-to-action buttons.

#0A0F1A · #CCCCCC · #1E2A3A

Abyss Depth

Creates subtle background gradients, layered UI elements, and a sense of profound depth.

#0C122C · #1E2A3A · #2A3E4A

Starlight Glow

Use for interactive buttons, glowing indicators, or to highlight important data points in a dark interface.

#0A0F1A · #2A3E4A · #CCCCCC

CSS variables

:root {
  --starlight-abyss-ink-1: #0A0F1A;
  --starlight-abyss-ink-2: #1E2A3A;
  --starlight-abyss-ink-3: #0C122C;
  --starlight-abyss-ink-4: #2A3E4A;
  --starlight-abyss-ink-5: #CCCCCC;
}

Tailwind config

theme: {
  extend: {
    colors: {
      "starlight-abyss-ink": {
        1: "#0A0F1A",
        2: "#1E2A3A",
        3: "#0C122C",
        4: "#2A3E4A",
        5: "#CCCCCC",
      }
    }
  }
}

Related searches

dark cosmic color schememysterious UI palettestarlight black and greydeep space brandinghigh contrast dark mode

Palette colors

Hex values

Color 1#0A0F1A
·
Color 2#1E2A3A
·
Color 3#0C122C
·
Color 4#2A3E4A
·
Color 5#CCCCCC
·

Accessibility

Contrast checker

1
2
3
4
5
1
1.3:1Fail
1:1Fail
1.7:1Fail
11.9:1AAA
2
1.3:1Fail
1.3:1Fail
1.3:1Fail
9:1AAA
3
1:1Fail
1.3:1Fail
1.7:1Fail
11.5:1AAA
4
1.7:1Fail
1.3:1Fail
1.7:1Fail
6.9:1AA
5
11.9:1AAA
9:1AAA
11.5:1AAA
6.9:1AA

Similar palettes

More like Starlight Abyss Ink

View all dark
Cosmic Deep Slumber
Galactic Void Shimmer
Celestial Dust Swirl
Cosmic Dust Bloom
Cosmic Stardust Drift
Dark Galaxy Nebula