Back to palettes

Palette

Cosmic Opal Sheen

A shimmering gradient of cosmic purples and blues, like stardust captured within an ethereal opal.

coolcalm5 colors
More cool palettes

Preview

See it in context.

Interface

New

Ready when you are.

A quick look at how Cosmic Opal Sheen 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 Opal Sheen.

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

Data visualization

#3D3D5C#6B6B99#A6A6CC#CCCDFF#E6E6FF

Palette guide

How to use Cosmic Opal Sheen

Overview

The Cosmic Opal Sheen palette offers a shimmering gradient of cosmic purples and blues, like stardust captured within an ethereal opal. It begins with the profound #3D3D5C (dark slate blue) and transitions through the rich #6B6B99 (medium lavender-blue) and the serene #A6A6CC (light periwinkle). The palette culminates in the luminous #CCCDFF (very pale blue-violet) and the ethereal #E6E6FF (near white-violet), evoking a dreamy, opalescent glow. This cool and calm collection is perfect for designers and developers crafting serene, sophisticated, or elegant digital experiences. It excels in creating atmospheric backgrounds, gentle branding, and UI elements that convey tranquility, softness, and a touch of celestial magic.

Best used for

  • Elegant dark mode app interfaces and websites
  • Luxury brand identity and high-end packaging
  • Abstract digital art and serene space illustrations
  • Fashion or beauty campaigns with ethereal vibes
  • Contemplative game environments and cinematic visuals
  • Sophisticated event invitations and signage

Suggested color roles

primary

Utilize #3D3D5C as a deep, anchoring background color, establishing a calm, professional canvas for celestial elements.

secondary

Employ #6B6B99 for significant content areas, subheadings, or distinct sections, offering a rich, supporting lavender-blue hue.

accent

Apply #A6A6CC for subtle highlights, interactive states, or as a secondary text color on dark backgrounds, adding a touch of sophisticated periwinkle.

background

The darker shades like #3D3D5C and #6B6B99 are ideal for expansive, tranquil backdrops, while #E6E6FF can be used for subtle, glowing elements or light mode accents.

text

For optimal readability on dark backgrounds like #3D3D5C or #6B6B99, use #E6E6FF or a crisp white. A deep charcoal or black provides excellent contrast on #CCCDFF or #E6E6FF.

Accessibility notes

  • Ensure sufficient contrast between #E6E6FF and the darker background colors, especially for body text.
  • White text on #3D3D5C, #6B6B99, and #A6A6CC generally provides good readability.
  • Avoid using #CCCDFF as a text color on #A6A6CC due to potential low contrast; reserve it for larger UI elements.
  • Test color combinations for legibility across various screen types and lighting conditions to maintain the desired mood.

Recommended combinations

Deep Opal

Creates a deep, harmonious blue-purple gradient, perfect for professional backgrounds or subtly layered UI designs.

#3D3D5C · #6B6B99 · #A6A6CC

Ethereal Sheen

Ideal for subtle gradients, ethereal overlays, or conveying a soft, luminous glow in illustrations and decorative elements.

#A6A6CC · #CCCDFF · #E6E6FF

Cosmic Glow

Excellent for establishing clear hierarchy, with a light highlight against a dark canvas, enhanced by a serene blue-purple accent.

#3D3D5C · #E6E6FF · #CCCDFF

CSS variables

:root {
  --cosmic-opal-sheen-1: #3D3D5C;
  --cosmic-opal-sheen-2: #6B6B99;
  --cosmic-opal-sheen-3: #A6A6CC;
  --cosmic-opal-sheen-4: #CCCDFF;
  --cosmic-opal-sheen-5: #E6E6FF;
}

Tailwind config

theme: {
  extend: {
    colors: {
      "cosmic-opal-sheen": {
        1: "#3D3D5C",
        2: "#6B6B99",
        3: "#A6A6CC",
        4: "#CCCDFF",
        5: "#E6E6FF",
      }
    }
  }
}

Related searches

purple blue celestial paletteopalescent color schemedreamy space colorscalm ui designethereal gradient

Palette colors

Hex values

Color 1#3D3D5C
·
Color 2#6B6B99
·
Color 3#A6A6CC
·
Color 4#CCCDFF
·
Color 5#E6E6FF
·

Accessibility

Contrast checker

1
2
3
4
5
1
2.1:1Fail
4.4:1AA18
6.8:1AA
8.5:1AAA
2
2.1:1Fail
2.1:1Fail
3.3:1AA18
4.1:1AA18
3
4.4:1AA18
2.1:1Fail
1.5:1Fail
1.9:1Fail
4
6.8:1AA
3.3:1AA18
1.5:1Fail
1.2:1Fail
5
8.5:1AAA
4.1:1AA18
1.9:1Fail
1.2:1Fail

Similar palettes

More like Cosmic Opal Sheen

View all cool
Celestial Ocean Mirror
Aqua Ocean Dream
Arctic Sky Aurora
Aurora Borealis Dream
Celestial Arctic Bloom
Celestial Aurora Dance