Palette

Astral Dream Hues

A collection of deep, serene hues inspired by the vast and mysterious beauty of astral dreams.

darkelegant5 colors

More dark palettes

Preview

See it in context.

Interface

New

Ready when you are.

A quick look at how Astral Dream Hues 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 Astral Dream Hues.

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

Data visualization

#1A0D2F#3B2A5E#5D478A#8F76BE#BFACE3

Palette guide

How to use Astral Dream Hues

Overview

The Astral Dream Hues palette is a collection of deep, serene hues inspired by the vast and mysterious beauty of astral dreams. Ranging from the profound indigo of #1A0D2F, through rich purples like #3B2A5E and #5D478A, to the ethereal lavender of #8F76BE and #BFACE3. This elegant and mystical palette is perfect for designers and developers crafting experiences that require a sense of tranquility, sophistication, and otherworldly charm. It offers a harmonious gradient of purples ideal for immersive backgrounds, luxury branding, or serene digital environments.

Best used for

Spiritual and wellness branding
Elegant web design projects
Luxury product packaging
Night sky visualizations
Meditation and mindfulness apps
Sophisticated event themes

Suggested color roles

primary

#1A0D2F serves as a deep, grounding primary color, ideal for main backgrounds or prominent headers.

secondary

#3B2A5E provides a rich, supportive depth, excellent for secondary content areas or navigation.

accent

#8F76BE offers a soft, ethereal highlight, perfect for delicate accents, subtle borders, or interactive elements.

background

#1A0D2F creates an immersive dark background, allowing lighter elements to stand out with elegant contrast.

text

#BFACE3 ensures excellent readability for primary text on dark backgrounds, or use a crisp white for maximum impact.

Accessibility notes

Ensure sufficient contrast for text, especially #BFACE3 on #1A0D2F, to meet WCAG AA standards.
Use lighter shades for interactive elements to improve visibility and usability on dark backgrounds.
Test legibility of lighter purples against each other for secondary information to avoid low contrast.
Provide clear visual cues for focus states on interactive components to enhance user navigation.

Recommended combinations

Deep Serenity

A core combination for dark themes, offering depth and clear readability for primary content.

#1A0D2F · #3B2A5E · #BFACE3

Dreamy Gradient

Ideal for backgrounds or large design areas that require a smooth, mystical transition.

#3B2A5E · #5D478A · #8F76BE

Astral Elegance

Creates a sophisticated layered effect, suitable for distinct UI sections or artistic flourishes.

#5D478A · #BFACE3 · #1A0D2F

CSS variables

:root {
  --astral-dream-hues-1: #1A0D2F;
  --astral-dream-hues-2: #3B2A5E;
  --astral-dream-hues-3: #5D478A;
  --astral-dream-hues-4: #8F76BE;
  --astral-dream-hues-5: #BFACE3;
}

Tailwind config

theme: {
  extend: {
    colors: {
      "astral-dream-hues": {
        1: "#1A0D2F",
        2: "#3B2A5E",
        3: "#5D478A",
        4: "#8F76BE",
        5: "#BFACE3",
      }
    }
  }
}

Hex values

Color 1#1A0D2F

Color 2#3B2A5E

Color 3#5D478A

Color 4#8F76BE

Color 5#BFACE3

Accessibility

Contrast checker

1.5:1Fail

2.4:1Fail

4.8:1AA

8.9:1AAA

1.5:1Fail

1.6:1Fail

3.3:1AA18

6.1:1AA

2.4:1Fail

1.6:1Fail

2:1Fail

3.7:1AA18

4.8:1AA

3.3:1AA18

2:1Fail

1.9:1Fail

8.9:1AAA

6.1:1AA

3.7:1AA18

1.9:1Fail

Similar palettes

More like Astral Dream Hues

View all dark

Celestial Whisper Nebula

Cosmic Violets

Galactic Nebula Swirl

Galactic Starlight Veil

Ancient Geode Vein

Celestial Dust Glimmer