Back to palettes

Palette

Celestial Ice Sparkle

Reflecting the ethereal sparkle of distant galaxies and frosty celestial bodies.

coolelegant5 colors
More cool palettes

Preview

See it in context.

Interface

New

Ready when you are.

A quick look at how Celestial Ice Sparkle 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 Ice Sparkle.

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

Data visualization

#BDE0FE#A2D2FF#8BB4F2#E0FFFF#CCF3EE

Palette guide

How to use Celestial Ice Sparkle

Overview

The Celestial Ice Sparkle palette reflects the ethereal sparkle of distant galaxies and frosty celestial bodies. Featuring the pristine #E0FFFF and #CCF3EE, it blends with the gentle #BDE0FE, the clear #A2D2FF, and the slightly deeper #8BB4F2. This collection is perfect for designers and developers seeking to create elegant, icy, and shimmering digital experiences, branding, or interfaces. Its harmonious blend of cool blues and near-whites provides versatility for creating serene visuals that evoke winter wonder, clarity, and a touch of sophisticated sparkle.

Best used for

  • Winter-themed event branding
  • Luxury jewelry e-commerce
  • High-tech product interfaces
  • Elegant wedding invitations
  • Icy fantasy game environments
  • Clean and modern corporate websites

Suggested color roles

primary

#E0FFFF serves as a pristine, airy background for main content areas, creating a sense of openness and sparkle.

secondary

#BDE0FE or #CCF3EE can be used for secondary elements, navigation, or subtle graphic accents, adding gentle structure.

accent

#8BB4F2 provides a slightly deeper accent for interactive elements or key information, ensuring visibility.

background

#E0FFFF offers a very light, almost white canvas, perfect for maximizing readability and an airy feel.

text

A dark charcoal or black is essential for optimal readability on these light pastel backgrounds.

Accessibility notes

  • Most colors are very light, so ensure text contrast is met by using dark text like black or charcoal.
  • Avoid using light text colors on any of these blues, as contrast will be insufficient.
  • #8BB4F2 offers slightly better contrast for larger headings or graphic elements when paired with #E0FFFF.
  • Consider larger font sizes for any text rendered in the lighter palette colors to improve readability.

Recommended combinations

Icy Clarity

A clean, high-contrast combination for readable content and a clear accent.

#E0FFFF · #8BB4F2 · #A2D2FF

Shimmering Gradient

Ideal for subtle background gradients or layered UI elements, creating a gentle transition.

#BDE0FE · #A2D2FF · #8BB4F2

Elegant Sparkle

Use #E0FFFF as a main background, with #CCF3EE for secondary elements and #A2D2FF for interactive components.

#E0FFFF · #CCF3EE · #A2D2FF

CSS variables

:root {
  --celestial-ice-sparkle-1: #BDE0FE;
  --celestial-ice-sparkle-2: #A2D2FF;
  --celestial-ice-sparkle-3: #8BB4F2;
  --celestial-ice-sparkle-4: #E0FFFF;
  --celestial-ice-sparkle-5: #CCF3EE;
}

Tailwind config

theme: {
  extend: {
    colors: {
      "celestial-ice-sparkle": {
        1: "#BDE0FE",
        2: "#A2D2FF",
        3: "#8BB4F2",
        4: "#E0FFFF",
        5: "#CCF3EE",
      }
    }
  }
}

Related searches

icy blue color paletteelegant winter UIshimmering space brandingcool blue web designfrosty aesthetic colors

Palette colors

Hex values

Color 1#BDE0FE
·
Color 2#A2D2FF
·
Color 3#8BB4F2
·
Color 4#E0FFFF
·
Color 5#CCF3EE
·

Accessibility

Contrast checker

1
2
3
4
5
1
1.2:1Fail
1.5:1Fail
1.3:1Fail
1.2:1Fail
2
1.2:1Fail
1.3:1Fail
1.5:1Fail
1.3:1Fail
3
1.5:1Fail
1.3:1Fail
2:1Fail
1.8:1Fail
4
1.3:1Fail
1.5:1Fail
2:1Fail
1.1:1Fail
5
1.2:1Fail
1.3:1Fail
1.8:1Fail
1.1:1Fail

Similar palettes

More like Celestial Ice Sparkle

View all cool
Frosted Winter Elegance
Winter Aurora Whisper
Art Deco Metropolis
Art Deco Sapphire
Astral Quartz Shimmer
Aurora Horizon Whisper