Palette

Galactic Drift

A journey through deep purples and lavenders, reminiscent of distant, swirling galaxies.

darkdark5 colors

More dark palettes

Preview

See it in context.

Interface

New

Ready when you are.

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

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

Data visualization

#1B1229#2D1B4C#4C3C7E#8A6FCF#C3A6FF

Palette guide

How to use Galactic Drift

Overview

The "Galactic Drift" palette offers a captivating journey through deep purples and lavenders, evoking distant, swirling galaxies. This mystical collection is perfect for creating immersive digital experiences and sophisticated branding. Anchored by the profound #1B1229, it transitions through richer purples like #2D1B4C and #4C3C7E, culminating in the vibrant #8A6FCF and ethereal #C3A6FF. Designers can leverage this gradient to build depth and visual interest, making it ideal for projects that require a sense of wonder and cosmic elegance. The harmonious progression ensures a fluid and appealing aesthetic.

Best used for

Fantasy game environments
Spiritual or wellness apps
Elegant event invitations
Creative portfolio sites
Abstract digital art
Luxury product packaging

Suggested color roles

primary

#1B1229 - Excellent for foundational dark backgrounds or large blocks of color, providing a deep, cosmic base.

secondary

#4C3C7E - Use for major sections, navigation, or secondary content areas, offering a rich mid-purple.

accent

#8A6FCF - Ideal for interactive elements, highlights, or calls-to-action to draw attention with a vibrant touch.

background

#1B1229 - The darkest hue, perfect for creating an expansive, dark-themed interface.

text

#C3A6FF - Best for primary body text or headings on darker backgrounds like #1B1229, ensuring high visibility.

Accessibility notes

Ensure #C3A6FF on #1B1229 provides sufficient contrast for readability, especially for small text.
Test #8A6FCF against #2D1B4C for button text or interactive states to meet WCAG standards.
Be cautious with text on #4C3C7E using darker shades; lighter text like #C3A6FF is recommended.
Provide adequate visual cues beyond color for interactive elements using #8A6FCF.

Recommended combinations

Deep Space

Creating immersive dark mode UIs with clear hierarchy and luminous highlights.

#1B1229 · #4C3C7E · #C3A6FF

Nebula Gradient

Smooth transitions for backgrounds or data visualizations, evoking cosmic phenomena.

#2D1B4C · #8A6FCF · #C3A6FF

Mystic Focus

Highlighting key information or calls-to-action against a deep, dark backdrop.

#1B1229 · #8A6FCF · #C3A6FF

CSS variables

:root {
  --galactic-drift-1: #1B1229;
  --galactic-drift-2: #2D1B4C;
  --galactic-drift-3: #4C3C7E;
  --galactic-drift-4: #8A6FCF;
  --galactic-drift-5: #C3A6FF;
}

Tailwind config

theme: {
  extend: {
    colors: {
      "galactic-drift": {
        1: "#1B1229",
        2: "#2D1B4C",
        3: "#4C3C7E",
        4: "#8A6FCF",
        5: "#C3A6FF",
      }
    }
  }
}

Hex values

Color 1#1B1229

Color 2#2D1B4C

Color 3#4C3C7E

Color 4#8A6FCF

Color 5#C3A6FF

Accessibility

Contrast checker

1.2:1Fail

1.9:1Fail

4.5:1AA

8.8:1AAA

1.2:1Fail

1.6:1Fail

3.8:1AA18

7.4:1AAA

1.9:1Fail

1.6:1Fail

2.3:1Fail

4.5:1AA

3.8:1AA18

2.3:1Fail

1.9:1Fail

8.8:1AAA

7.4:1AAA

4.5:1AA

1.9:1Fail

Similar palettes

More like Galactic Drift

Galactic Drift

See it in context.

Ready when you are.

Built with Galactic Drift.

How to use Galactic Drift

Overview

Best used for

Suggested color roles

Accessibility notes

Recommended combinations

Deep Space

Nebula Gradient

Mystic Focus

CSS variables

Tailwind config

Related searches

Hex values

Contrast checker

More like Galactic Drift