Palette

Starry Opal Iridescence

An ethereal and shimmering palette, reflecting the mystical, soft glow of opals and distant starlight.

pastelelegant5 colors

More pastel palettes

Preview

See it in context.

Interface

New

Ready when you are.

A quick look at how Starry Opal Iridescence 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 Starry Opal Iridescence.

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

Data visualization

#F0F8FF#AFEEEE#FFDAB9#98FB98#E6E6FA

Palette guide

How to use Starry Opal Iridescence

Overview

The Starry Opal Iridescence palette presents an ethereal and shimmering collection of pastel hues, perfect for designs requiring a soft, dreamy, and elegant touch. Anchored by the near-white #F0F8FF, it introduces gentle, mystical tones like #AFEEEE, a soft aqua, and the warm, inviting #FFDAB9. The unexpected #98FB98 adds a hint of celestial green, while #E6E6FA grounds the palette with a delicate lavender. This combination is ideal for designers and developers creating delicate interfaces, whimsical branding, or serene digital experiences that evoke the gentle glow of opals and distant starlight, ensuring a light and airy aesthetic.

Best used for

Wedding invitations and bridal branding
Baby product packaging and websites
Beauty and skincare product lines
Fantasy or ethereal digital art
Serene meditation app interfaces
Dreamy fashion or jewelry collections

Suggested color roles

primary

Use #F0F8FF as the dominant background or base color to establish an airy, luminous foundation.

secondary

Employ #AFEEEE and #E6E6FA for secondary content blocks, subtle gradients, or decorative elements that require a soft touch.

accent

Introduce #FFDAB9 and #98FB98 sparingly for delicate highlights, small icons, or to add a hint of unexpected shimmer and warmth.

background

The lightest shade, #F0F8FF, is perfect for a clean, airy background, enhancing the ethereal quality of the palette.

text

For optimal readability, use a soft charcoal, dark gray, or even a deep muted pastel from outside the palette (e.g., a dark plum or navy) for text on these light backgrounds.

Accessibility notes

Ensure sufficient contrast for text, as many colors are light; a dark gray or charcoal is often necessary for legibility.
Avoid using light pastel text on light pastel backgrounds to prevent readability issues.
Test color combinations for users with visual impairments, as subtle differences might be hard to distinguish.
Consider using larger font sizes or bolding for critical text elements to improve readability on light backgrounds.

Recommended combinations

Soft Glow

Ideal for creating serene, layered backgrounds or gentle UI elements with a harmonious, light feel.

#F0F8FF · #AFEEEE · #E6E6FA

Opal Sparkle

Perfect for subtle accents or decorative illustrations, adding a touch of iridescent warmth and freshness.

#AFEEEE · #FFDAB9 · #98FB98

Dreamy Base

Excellent for establishing a soft, inviting base with delicate hints of warmth and subtle color variation.

#E6E6FA · #F0F8FF · #FFDAB9

CSS variables

:root {
  --starry-opal-iridescence-1: #F0F8FF;
  --starry-opal-iridescence-2: #AFEEEE;
  --starry-opal-iridescence-3: #FFDAB9;
  --starry-opal-iridescence-4: #98FB98;
  --starry-opal-iridescence-5: #E6E6FA;
}

Tailwind config

theme: {
  extend: {
    colors: {
      "starry-opal-iridescence": {
        1: "#F0F8FF",
        2: "#AFEEEE",
        3: "#FFDAB9",
        4: "#98FB98",
        5: "#E6E6FA",
      }
    }
  }
}

Hex values

Color 1#F0F8FF

Color 2#AFEEEE

Color 3#FFDAB9

Color 4#98FB98

Color 5#E6E6FA

Accessibility

Contrast checker

1.2:1Fail

1.1:1Fail

1.2:1Fail

1:1Fail

1.2:1Fail

1:1Fail

1.1:1Fail

1.2:1Fail

1:1Fail

1.1:1Fail

1:1Fail

1.1:1Fail

1:1Fail

Similar palettes

More like Starry Opal Iridescence

Starry Opal Iridescence

See it in context.

Ready when you are.

Built with Starry Opal Iridescence.

How to use Starry Opal Iridescence

Overview

Best used for

Suggested color roles

Accessibility notes

Recommended combinations

Soft Glow

Opal Sparkle

Dreamy Base

CSS variables

Tailwind config

Related searches

Hex values

Contrast checker

More like Starry Opal Iridescence