Back to palettes

Palette

Celestial Opal Bloom

Inspired by the iridescent blues and mystical glow of opals against a serene sky.

coolelegant5 colors
More cool palettes

Preview

See it in context.

Interface

New

Ready when you are.

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

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

Data visualization

#ADD8E6#87CEEB#6495ED#4169E1#1E90FF

Palette guide

How to use Celestial Opal Bloom

Overview

The Celestial Opal Bloom palette is inspired by the iridescent blues and mystical glow of opals against a serene sky. This collection offers a beautiful progression of cool blues, from the soft #ADD8E6 to the vibrant, deep #1E90FF. The harmonious intermediate shades like #87CEEB, #6495ED, and #4169E1 create a seamless visual flow, ideal for elegant and ethereal designs. Designers can leverage this palette to evoke sophistication, clarity, and a sense of gentle wonder. Developers will find these distinct hex codes perfect for crafting clean, user-friendly interfaces, soft backgrounds, and readable text in a light mode setting.

Best used for

  • Luxury jewelry or accessory brands
  • High-end spa or beauty product websites
  • Bridal or elegant event planning materials
  • Wellness or meditation apps
  • Digital art portfolios with a serene aesthetic
  • Cloud computing interfaces for a gentle feel

Suggested color roles

primary

#6495ED provides a stable, calming cornflower blue foundation for main content areas or brand identity.

secondary

#4169E1 offers a vibrant royal blue for headers, sub-sections, or interactive elements.

accent

#1E90FF delivers a luminous, energetic dodger blue, ideal for calls-to-action, key highlights, or interactive components.

background

#ADD8E6 or #87CEEB 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 #ADD8E6.

Accessibility notes

  • Ensure dark text (e.g., #333333) has sufficient contrast on #ADD8E6 and #87CEEB.
  • White or #ADD8E6 provides good contrast on #4169E1 and #1E90FF.
  • Avoid using #87CEEB for small text on #ADD8E6 as contrast will be insufficient.
  • All interactive elements must meet WCAG contrast guidelines for both color and focus states.

Recommended combinations

Opal Glow

Ideal for hero sections, combining soft blues with a vibrant, energetic highlight.

#ADD8E6 · #6495ED · #1E90FF

Blue Gradient

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

#87CEEB · #6495ED · #4169E1

Ethereal Sky

Creates a refreshing and lively aesthetic, suitable for intros or dynamic information displays.

#ADD8E6 · #1E90FF · #87CEEB

CSS variables

:root {
  --celestial-opal-bloom-1: #ADD8E6;
  --celestial-opal-bloom-2: #87CEEB;
  --celestial-opal-bloom-3: #6495ED;
  --celestial-opal-bloom-4: #4169E1;
  --celestial-opal-bloom-5: #1E90FF;
}

Tailwind config

theme: {
  extend: {
    colors: {
      "celestial-opal-bloom": {
        1: "#ADD8E6",
        2: "#87CEEB",
        3: "#6495ED",
        4: "#4169E1",
        5: "#1E90FF",
      }
    }
  }
}

Related searches

opal blue color palettecelestial light blue UIelegant blue gradientethereal pastel bluesserene jewelry branding

Palette colors

Hex values

Color 1#ADD8E6
·
Color 2#87CEEB
·
Color 3#6495ED
·
Color 4#4169E1
·
Color 5#1E90FF
·

Accessibility

Contrast checker

1
2
3
4
5
1
1.1:1Fail
1.9:1Fail
3.2:1AA18
2.1:1Fail
2
1.1:1Fail
1.7:1Fail
2.8:1Fail
1.9:1Fail
3
1.9:1Fail
1.7:1Fail
1.6:1Fail
1.1:1Fail
4
3.2:1AA18
2.8:1Fail
1.6:1Fail
1.5:1Fail
5
2.1:1Fail
1.9:1Fail
1.1:1Fail
1.5:1Fail

Similar palettes

More like Celestial Opal Bloom

View all cool
Celestial Dewdrop Gleam
Celestial Opal Glint
Aurora Borealis Glow
Aurora Shimmer Dance
Aurora Shimmer Veil
Aurora Sky Glow