Back to palettes

Palette

Celestial Opal Dream

A delicate blend of blues and purples, like the ethereal shimmer of an opal in starlight.

pastelcalm5 colors
More pastel palettes

Preview

See it in context.

Interface

New

Ready when you are.

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

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

Data visualization

#ADD8E6#87CEEB#BA55D3#DDA0DD#E0FFFF

Palette guide

How to use Celestial Opal Dream

Overview

The Celestial Opal Dream palette is a delicate blend of blues and purples, like the ethereal shimmer of an opal in starlight. Ranging from the softest aqua #E0FFFF to the gentle medium violet red #BA55D3, with soothing light blues like #ADD8E6 and #87CEEB, this collection is perfect for creating calming and inviting designs. Designers can leverage its gentle hues for a sense of tranquility, softness, and whimsical elegance, ideal for interfaces that aim to be soothing and visually delicate. Developers will find these distinct hex codes useful for crafting soft gradients, airy backgrounds, and readable text.

Best used for

  • Wellness or meditation apps
  • Baby product branding or websites
  • Bridal or elegant event planning materials
  • Soft, feminine fashion or beauty brands
  • Dream interpretation or spiritual guidance platforms
  • Personal blogs with a calm aesthetic

Suggested color roles

primary

#87CEEB provides a clear, inviting sky blue as a main content color or brand identity.

secondary

#BA55D3 offers a gentle medium violet red, suitable for supporting elements, headers, or subtle accents.

accent

#DDA0DD delivers a soft, luminous plum, ideal for delicate highlights, hover states, or subtle glows.

background

#E0FFFF or #ADD8E6 create a very light, airy, and expansive canvas.

text

Use a dark color like charcoal or black on the lighter backgrounds. For darker elements, use white or #E0FFFF.

Accessibility notes

  • Ensure dark text (e.g., #333333) has sufficient contrast on #ADD8E6, #87CEEB, and #E0FFFF.
  • Avoid using #DDA0DD for small text on #BA55D3 as contrast might be insufficient.
  • White or #E0FFFF provides good contrast on #BA55D3 for headings or larger text.
  • All interactive elements must meet WCAG contrast guidelines for both color and focus states.

Recommended combinations

Opal Shimmer

Ideal for hero sections or delicate UI elements, combining light aqua with soft purples.

#E0FFFF · #BA55D3 · #DDA0DD

Dreamy Gradient

Excellent for layered UI elements, showcasing a smooth transition from light blues to a gentle violet.

#ADD8E6 · #87CEEB · #BA55D3

Soft Glow

Creates a very light and airy aesthetic, suitable for intros or delicate information displays.

#E0FFFF · #DDA0DD · #ADD8E6

CSS variables

:root {
  --celestial-opal-dream-1: #ADD8E6;
  --celestial-opal-dream-2: #87CEEB;
  --celestial-opal-dream-3: #BA55D3;
  --celestial-opal-dream-4: #DDA0DD;
  --celestial-opal-dream-5: #E0FFFF;
}

Tailwind config

theme: {
  extend: {
    colors: {
      "celestial-opal-dream": {
        1: "#ADD8E6",
        2: "#87CEEB",
        3: "#BA55D3",
        4: "#DDA0DD",
        5: "#E0FFFF",
      }
    }
  }
}

Related searches

pastel blue purple palettecelestial opal colorsdreamy soft UI designiridescent pastel schemecalm feminine branding

Palette colors

Hex values

Color 1#ADD8E6
·
Color 2#87CEEB
·
Color 3#BA55D3
·
Color 4#DDA0DD
·
Color 5#E0FFFF
·

Accessibility

Contrast checker

1
2
3
4
5
1
1.1:1Fail
2.6:1Fail
1.4:1Fail
1.4:1Fail
2
1.1:1Fail
2.3:1Fail
1.2:1Fail
1.7:1Fail
3
2.6:1Fail
2.3:1Fail
1.9:1Fail
3.7:1AA18
4
1.4:1Fail
1.2:1Fail
1.9:1Fail
2:1Fail
5
1.4:1Fail
1.7:1Fail
3.7:1AA18
2:1Fail

Similar palettes

More like Celestial Opal Dream

View all pastel
Amethyst Haze Dream
Aura Amethyst Dream
Celestial Blush
Celestial Dawn Chorus
Celestial Dream Dust
Celestial Nebula Whisper