Palette

Galactic Void Shimmer

Deep, dark blues and purples punctuated by a distant shimmer, evoking the mystery of deep space.

darkdark5 colors

More dark palettes

Preview

See it in context.

Interface

New

Ready when you are.

A quick look at how Galactic Void Shimmer 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 Galactic Void Shimmer.

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

Data visualization

#0B0E14#1E1A3C#3F326D#6B57A3#A28DD8

Palette guide

How to use Galactic Void Shimmer

Overview

The 'Galactic Void Shimmer' palette masterfully blends deep space mystique with subtle cosmic brilliance. Centered around rich purples and near-blacks, it offers a sophisticated, ethereal feel. Starting with the profound darkness of #0B0E14, it transitions through the deep indigo of #1E1A3C and the regal #3F326D. The lighter, shimmering tones of #6B57A3 and the softest #A28DD8 provide crucial contrast, allowing designers to craft immersive digital experiences, elegant branding, or atmospheric UI themes. This palette is ideal for projects requiring depth, mystery, and a touch of otherworldly glow.

Best used for

High-end luxury branding for tech or cosmetics
Science fiction game interfaces and environments
E-commerce sites for mystical or spiritual products
Event branding for sophisticated evening galas
Digital art and illustration with cosmic themes
Atmospheric website backgrounds and hero sections

Suggested color roles

primary

Use #1E1A3C as the dominant brand color for large sections, headers, or main navigation. Its deep, mysterious quality sets a sophisticated tone.

secondary

Employ #3F326D for complementary elements like secondary buttons, subheadings, or background panels. It offers a slightly softer yet still profound presence.

accent

Apply #A28DD8 sparingly for calls-to-action, interactive elements, or key highlights to create a 'shimmer' effect. It provides essential visual interest and contrast.

background

The deep #0B0E14 is perfect for dark mode interfaces or full-bleed backgrounds, establishing an immersive, void-like canvas.

text

For body text, use a light color like #A28DD8 or #6B57A3 against dark backgrounds for readability. For headings, a crisp white or near-white works well with #0B0E14 or #1E1A3C.

Accessibility notes

Ensure sufficient contrast between #0B0E14 background and lighter text, aiming for AA or AAA standards.
Avoid using #6B57A3 text directly on #3F326D backgrounds; the contrast might be insufficient for some users.
Pair #A28DD8 with the darkest colors like #0B0E14 or #1E1A3C for optimal readability.
Consider a slightly brighter near-white for essential body text on primary dark backgrounds to enhance legibility.

Recommended combinations

Deep Space UI

Ideal for dark mode interfaces, using the lightest for interactive elements and text.

#0B0E14 · #1E1A3C · #A28DD8

Mystic Branding

Creates a harmonious, layered look for branding elements, with #6B57A3 as a subtle highlight.

#1E1A3C · #3F326D · #6B57A3

Cosmic Headline

Use #3F326D for sections, #0B0E14 for sub-elements, and #A28DD8 for titles or key callouts.

#3F326D · #0B0E14 · #A28DD8

CSS variables

:root {
  --galactic-void-shimmer-1: #0B0E14;
  --galactic-void-shimmer-2: #1E1A3C;
  --galactic-void-shimmer-3: #3F326D;
  --galactic-void-shimmer-4: #6B57A3;
  --galactic-void-shimmer-5: #A28DD8;
}

Tailwind config

theme: {
  extend: {
    colors: {
      "galactic-void-shimmer": {
        1: "#0B0E14",
        2: "#1E1A3C",
        3: "#3F326D",
        4: "#6B57A3",
        5: "#A28DD8",
      }
    }
  }
}

Hex values

Color 1#0B0E14

Color 2#1E1A3C

Color 3#3F326D

Color 4#6B57A3

Color 5#A28DD8

Accessibility

Contrast checker

1.2:1Fail

1.7:1Fail

3.2:1AA18

6.7:1AA

1.2:1Fail

1.5:1Fail

2.8:1Fail

5.8:1AA

1.7:1Fail

1.5:1Fail

1.9:1Fail

3.9:1AA18