Palette

Midnight Cosmic Void

Deep, cosmic purples and dark blues capture the mystery of a starlit midnight sky.

darkdark5 colors

More dark palettes

Preview

See it in context.

Interface

New

Ready when you are.

A quick look at how Midnight Cosmic Void 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 Midnight Cosmic Void.

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

Data visualization

#1A1A2E#2C0B4F#4D1F6E#724C9E#9A7BDC

Palette guide

How to use Midnight Cosmic Void

Overview

The Midnight Cosmic Void palette offers a stunning journey into deep space with its rich blend of purples and dark blues. Anchored by the profound #1A1A2E, it transitions through the mysterious #2C0B4F and the vibrant #4D1F6E. This celestial gradient culminates in the ethereal #724C9E and the luminous #9A7BDC, providing a versatile range for digital and print media. Designers can leverage these colors to evoke a sense of mystery, luxury, and vastness. It's ideal for creating captivating UI elements, immersive backgrounds, or elegant branding that seeks to convey sophistication and depth. Developers will find these shades excellent for dark mode themes, space-themed applications, or any project aiming for an otherworldly, premium aesthetic.

Best used for

Sci-fi game user interfaces
Luxury brand websites and apps
Dark mode UI/UX themes
Astrology or spiritual branding
Event branding for galas or tech conferences
Abstract digital art installations

Suggested color roles

primary

Use #1A1A2E as the foundational dark base for large UI areas or main backgrounds, establishing a deep, mysterious tone.

secondary

Apply #2C0B4F for secondary backgrounds, panels, or large content blocks to add depth without overwhelming the primary color.

accent

Reserve #9A7BDC for interactive elements, calls-to-action, or key highlights where a luminous, cosmic pop is desired.

background

The profound #1A1A2E works excellently as a primary background, providing a vast, dark canvas for celestial designs.

text

For optimal readability on dark backgrounds, use #9A7BDC or #724C9E for primary text, ensuring sufficient contrast with the darker shades.

Accessibility notes

Ensure sufficient contrast between #1A1A2E or #2C0B4F backgrounds and lighter text like #9A7BDC for WCAG AA compliance.
Avoid using #4D1F6E for small text on #2C0B4F backgrounds, as contrast may be insufficient for readability.
Use #9A7BDC as an accent for focus indicators and interactive elements to ensure visibility for users with low vision.
Consider providing an option for higher contrast text (e.g., pure white) for users with specific accessibility needs on dark backgrounds.

Recommended combinations

Cosmic Depth

Ideal for main page layouts, pairing a deep background with a rich mid-tone and a bright, ethereal accent for headings.

#1A1A2E · #4D1F6E · #9A7BDC

Mystic Gradient

Great for subtle gradients in hero sections or banners, creating a smooth transition from dark to light.

#2C0B4F · #724C9E · #9A7BDC

Interactive Focus

Perfect for UI components: #1A1A2E for the container, #2C0B4F for secondary elements, and #9A7BDC for buttons or interactive states.

#1A1A2E · #2C0B4F · #9A7BDC

CSS variables

:root {
  --midnight-cosmic-void-1: #1A1A2E;
  --midnight-cosmic-void-2: #2C0B4F;
  --midnight-cosmic-void-3: #4D1F6E;
  --midnight-cosmic-void-4: #724C9E;
  --midnight-cosmic-void-5: #9A7BDC;
}

Tailwind config

theme: {
  extend: {
    colors: {
      "midnight-cosmic-void": {
        1: "#1A1A2E",
        2: "#2C0B4F",
        3: "#4D1F6E",
        4: "#724C9E",
        5: "#9A7BDC",
      }
    }
  }
}

Hex values

Color 1#1A1A2E

Color 2#2C0B4F

Color 3#4D1F6E

Color 4#724C9E

Color 5#9A7BDC

Accessibility

Contrast checker

1:1Fail

1.4:1Fail

2.6:1Fail

5.1:1AA

1:1Fail

1.4:1Fail

2.6:1Fail

4.9:1AA

1.4:1Fail

1.9:1Fail

3.6:1AA18

2.6:1Fail

1.9:1Fail

5.1:1AA

4.9:1AA

3.6:1AA18

1.9:1Fail

Similar palettes

More like Midnight Cosmic Void

Midnight Cosmic Void

See it in context.

Ready when you are.

Built with Midnight Cosmic Void.

How to use Midnight Cosmic Void

Overview

Best used for

Suggested color roles

Accessibility notes

Recommended combinations

Cosmic Depth

Mystic Gradient

Interactive Focus

CSS variables

Tailwind config

Related searches

Hex values

Contrast checker

More like Midnight Cosmic Void