Palette

Galactic Cloud Shard

A mysterious and deep palette, mirroring distant nebulae and cosmic dust clouds.

darkdark5 colors

More dark palettes

Preview

See it in context.

Interface

New

Ready when you are.

A quick look at how Galactic Cloud Shard 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 Cloud Shard.

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

Data visualization

#2A0A3A#4C136D#823CA5#C68CDD#1A082C

Palette guide

How to use Galactic Cloud Shard

Overview

The Galactic Cloud Shard palette presents a mysterious and deep array of purples, mirroring distant nebulae and cosmic dust clouds. It's built upon a foundation of profound darks like #1A082C and #2A0A3A, moving through the rich #4C136D and the vibrant #823CA5, culminating in the luminous #C68CDD. This palette is exceptionally useful for designers and developers aiming to evoke a sense of mystique, luxury, or advanced technology within a dark aesthetic. Its strong contrast between deep bases and bright accents allows for dynamic visual hierarchies and compelling user experiences across various platforms.

Best used for

Luxury brand websites and digital experiences
Mystical or fantasy-themed game interfaces
High-end product packaging and branding
Concert visuals and stage design
Dark mode web and mobile applications
Abstract digital art and illustrations

Suggested color roles

primary

Assign #4C136D as the primary color for large sections, headers, or key interactive elements to provide a rich and engaging base.

secondary

Utilize #823CA5 for sub-headings, secondary buttons, or data visualizations, offering a vibrant mid-tone that stands out.

accent

Employ #C68CDD as a bright, shimmering accent for calls to action, hover states, or small, important UI indicators.

background

Choose #1A082C as the deepest background color, establishing a profound, cosmic foundation for the entire design.

text

Use #C68CDD for primary text on dark backgrounds to ensure high readability and a luminous visual appeal.

Accessibility notes

Ensure #C68CDD text has strong contrast on #1A082C and #2A0A3A for optimal readability.
Check that #823CA5 offers sufficient contrast when used for larger text elements on #4C136D.
Avoid using #2A0A3A or #4C136D as text colors on #1A082C due to insufficient contrast.
Consider increasing font size or weight for text elements using #823CA5 to enhance legibility.

Recommended combinations

Deep Nebula

Creates a profound, layered dark background perfect for immersive interfaces.

#1A082C · #2A0A3A · #4C136D

Cosmic Glimmer

Ideal for showcasing content with a vibrant, progressively lighter purple accent.

#4C136D · #823CA5 · #C68CDD

Mystic Shadow

Effectively highlights key information with a striking contrast against a deep base.

#2A0A3A · #823CA5 · #C68CDD

CSS variables

:root {
  --galactic-cloud-shard-1: #2A0A3A;
  --galactic-cloud-shard-2: #4C136D;
  --galactic-cloud-shard-3: #823CA5;
  --galactic-cloud-shard-4: #C68CDD;
  --galactic-cloud-shard-5: #1A082C;
}

Tailwind config

theme: {
  extend: {
    colors: {
      "galactic-cloud-shard": {
        1: "#2A0A3A",
        2: "#4C136D",
        3: "#823CA5",
        4: "#C68CDD",
        5: "#1A082C",
      }
    }
  }
}

Hex values

Color 1#2A0A3A

Color 2#4C136D

Color 3#823CA5

Color 4#C68CDD

Color 5#1A082C

Accessibility

Contrast checker

1.3:1Fail

2.6:1Fail

6.8:1AA

1.1:1Fail

1.3:1Fail

1.9:1Fail

5.1:1AA

1.5:1Fail

2.6:1Fail

1.9:1Fail

2.6:1Fail

2.8:1Fail

6.8:1AA

5.1:1AA

2.6:1Fail

7.4:1AAA

1.1:1Fail

1.5:1Fail

2.8:1Fail

7.4:1AAA

Similar palettes

More like Galactic Cloud Shard

Galactic Cloud Shard

See it in context.

Ready when you are.

Built with Galactic Cloud Shard.

How to use Galactic Cloud Shard

Overview

Best used for

Suggested color roles

Accessibility notes

Recommended combinations

Deep Nebula

Cosmic Glimmer

Mystic Shadow

CSS variables

Tailwind config

Related searches

Hex values

Contrast checker

More like Galactic Cloud Shard