Back to palettes

Palette

Celestial Opal Glow

Dazzling purples and magentas inspired by the iridescent shimmer of opals in deep space.

vibrantelegant5 colors
More vibrant palettes

Preview

See it in context.

Interface

New

Ready when you are.

A quick look at how Celestial Opal Glow 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 Celestial Opal Glow.

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

Data visualization

#3D0B40#6A1A70#972BA0#C43BCE#F14CFE

Palette guide

How to use Celestial Opal Glow

Overview

The "Celestial Opal Glow" palette is a dazzling collection of purples and magentas, radiating an energetic and magical vibe. Starting from the deep, mysterious #3D0B40, it transitions through vibrant jewel tones like #6A1A70 and #972BA0, culminating in the brilliant, almost neon #C43BCE and #F14CFE. This spectrum evokes the iridescent shimmer of opals in deep space, making it perfect for designs that demand attention and convey a sense of wonder. Developers and designers can utilize this palette to create dynamic interfaces, captivating digital art, or impactful branding that stands out with its luminous and sophisticated glow.

Best used for

  • Fantasy game interfaces
  • Luxury beauty product branding
  • Event and party promotions
  • Creative digital art projects
  • High-tech product showcases
  • Vibrant fashion accessories

Suggested color roles

primary

#3D0B40 - Establish a deep, mysterious base, perfect for backgrounds or dark mode interfaces.

secondary

#6A1A70 - Use for secondary sections, large headers, or elements needing a rich, supporting color.

accent

#F14CFE - A brilliant choice for call-to-action buttons, interactive elements, or striking visual highlights.

background

#3D0B40 - Provides a powerful, dark canvas that makes the brighter purples truly pop.

text

#F14CFE - Excellent for headlines or short, impactful text on dark backgrounds. For body text, consider a near-white like #FFFFFF or #E0E0E0 for readability against the darker shades.

Accessibility notes

  • Text in #F14CFE on #3D0B40 offers strong contrast, suitable for headings and UI.
  • Avoid using #C43BCE or #F14CFE for large blocks of body text due to their vibrancy potentially causing eye strain.
  • Ensure sufficient contrast for #972BA0 text on #6A1A70, especially for smaller font sizes.
  • Use a tool to check WCAG AA contrast for all color pairs, particularly for interactive elements.

Recommended combinations

Cosmic Depth

Creates a dramatic contrast, ideal for dark themes with vibrant highlights.

#3D0B40 · #6A1A70 · #F14CFE

Vibrant Gradient

Perfect for smooth, energetic gradients in backgrounds, banners, or illustrations.

#6A1A70 · #972BA0 · #C43BCE

Glowing Accent

Use the brightest colors as compelling accents against the deepest base for maximum impact.

#3D0B40 · #C43BCE · #F14CFE

CSS variables

:root {
  --celestial-opal-glow-1: #3D0B40;
  --celestial-opal-glow-2: #6A1A70;
  --celestial-opal-glow-3: #972BA0;
  --celestial-opal-glow-4: #C43BCE;
  --celestial-opal-glow-5: #F14CFE;
}

Tailwind config

theme: {
  extend: {
    colors: {
      "celestial-opal-glow": {
        1: "#3D0B40",
        2: "#6A1A70",
        3: "#972BA0",
        4: "#C43BCE",
        5: "#F14CFE",
      }
    }
  }
}

Related searches

vibrant purple magenta palettecosmic jewel tonesenergetic opal colorsdark purple bright accentmagical glowing hues

Palette colors

Hex values

Color 1#3D0B40
·
Color 2#6A1A70
·
Color 3#972BA0
·
Color 4#C43BCE
·
Color 5#F14CFE
·

Accessibility

Contrast checker

1
2
3
4
5
1
1.5:1Fail
2.4:1Fail
3.7:1AA18
5.5:1AA
2
1.5:1Fail
1.6:1Fail
2.4:1Fail
3.6:1AA18
3
2.4:1Fail
1.6:1Fail
1.5:1Fail
2.3:1Fail
4
3.7:1AA18
2.4:1Fail
1.5:1Fail
1.5:1Fail
5
5.5:1AA
3.6:1AA18
2.3:1Fail
1.5:1Fail

Similar palettes

More like Celestial Opal Glow

View all vibrant