Palette

Cosmic Dawn Hues

A blend of deep purples and fuchsia, capturing the mystical transition of light in a cosmic dawn.

vibrantenergetic5 colors

More vibrant palettes

Preview

See it in context.

Interface

New

Ready when you are.

A quick look at how Cosmic Dawn 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 Cosmic Dawn Hues.

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

Data visualization

#1E0942#3A105F#5F1B7F#8E30A2#C058C0

Palette guide

How to use Cosmic Dawn Hues

Overview

The Cosmic Dawn Hues palette presents a mystical blend of deep purples and fuchsia, capturing the enchanting transition of light in a cosmic dawn. Featuring shades like the profound #1E0942, the rich #3A105F, and the vibrant #C058C0, this collection offers designers an energetic and sophisticated choice. The strong contrasts between dark and bright purples allow for dynamic visual hierarchies, perfect for conveying mystery and allure. Developers can leverage these hex codes to craft exhilarating digital experiences, from impactful landing pages to vibrant game interfaces, ensuring a memorable and visually stimulating user journey that conveys power and excitement across all platforms.

Best used for

High-energy event branding and promotions
Fantasy or sci-fi game UI/UX
Vibrant digital marketing campaigns
Creative portfolio websites for bold artists
Product packaging for cosmetics or luxury items
Motion graphics and animation with mystical themes

Suggested color roles

primary

Designate #1E0942 as a powerful primary, ideal for deep backgrounds, main headers, or foundational brand elements.

secondary

Utilize #3A105F as a rich secondary, excellent for subheadings, navigation, or larger UI components to add depth.

accent

Apply #C058C0 as a vibrant accent, perfect for calls-to-action, interactive elements, or highlights that demand attention.

background

The deep #1E0942 provides an immersive dark canvas. Use #C058C0 as a vibrant background for sections needing high energy.

text

White or a very light gray provides excellent contrast on #1E0942, #3A105F, and #5F1B7F. Use #1E0942 for text on #C058C0.

Accessibility notes

Ensure white text on #1E0942, #3A105F, and #5F1B7F meets WCAG AA contrast standards.
The combination of #8E30A2 and #C058C0 might have insufficient contrast for text; use for larger graphics or accents.
For critical calls-to-action, #C058C0 on #1E0942 offers excellent visibility and impact.
Avoid using #8E30A2 for small text on #C058C0; consider a darker palette color or black for readability.

Recommended combinations

Cosmic Glow

Combine the deepest background with a mid-tone and vibrant fuchsia for a powerful, eye-catching hero section or logo.

#1E0942 · #5F1B7F · #C058C0

Dawn Transition

Create smooth gradients or layered effects in UI design, mimicking the mystical transition of cosmic dawn.

#3A105F · #8E30A2 · #C058C0

Vivid Contrast

Use #C058C0 as a bright background, #1E0942 for primary text, and #8E30A2 for secondary information or interactive elements.

#C058C0 · #1E0942 · #8E30A2

CSS variables

:root {
  --cosmic-dawn-hues-1: #1E0942;
  --cosmic-dawn-hues-2: #3A105F;
  --cosmic-dawn-hues-3: #5F1B7F;
  --cosmic-dawn-hues-4: #8E30A2;
  --cosmic-dawn-hues-5: #C058C0;
}

Tailwind config

theme: {
  extend: {
    colors: {
      "cosmic-dawn-hues": {
        1: "#1E0942",
        2: "#3A105F",
        3: "#5F1B7F",
        4: "#8E30A2",
        5: "#C058C0",
      }
    }
  }
}

Hex values

Color 1#1E0942

Color 2#3A105F

Color 3#5F1B7F

Color 4#8E30A2

Color 5#C058C0

Accessibility

Contrast checker

1.2:1Fail

1.7:1Fail

2.6:1Fail

4.6:1AA

1.2:1Fail

1.4:1Fail

2.2:1Fail

3.8:1AA18

1.7:1Fail

1.4:1Fail

1.6:1Fail

2.8:1Fail

2.6:1Fail

2.2:1Fail

1.6:1Fail

1.7:1Fail

4.6:1AA

3.8:1AA18

2.8:1Fail

1.7:1Fail

Similar palettes

More like Cosmic Dawn Hues

Cosmic Dawn Hues

See it in context.

Ready when you are.

Built with Cosmic Dawn Hues.

How to use Cosmic Dawn Hues

Overview

Best used for

Suggested color roles

Accessibility notes

Recommended combinations

Cosmic Glow

Dawn Transition

Vivid Contrast

CSS variables

Tailwind config

Related searches

Hex values

Contrast checker

More like Cosmic Dawn Hues