Back to palettes

Palette

Celestial Glow

Light and ethereal blues, capturing the soft, radiant glow of the early morning sky.

coolcalm5 colors
More cool palettes

Preview

See it in context.

Interface

New

Ready when you are.

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

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

Data visualization

#F0F8FF#ADD8E6#87CEEB#B0E0E6#C1F1F7

Palette guide

How to use Celestial Glow

Overview

The Celestial Glow palette captures light and ethereal blues, reflecting the soft, radiant glow of the early morning sky. Featuring the pristine #F0F8FF, it blends seamlessly with the gentle #ADD8E6, the clear #87CEEB, and the airy #B0E0E6 and #C1F1F7. This collection is perfect for designers and developers seeking to create calm, refreshing, and airy digital experiences, branding, or interfaces. Its harmonious blend of light blues provides versatility for creating serene visuals that evoke peace, clarity, and a sense of open space.

Best used for

  • Wellness and spa branding
  • Cloud computing service interfaces
  • Baby product websites or packaging
  • Clean and minimalist web designs
  • Healthcare and medical platforms
  • Calm meditation app UIs

Suggested color roles

primary

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

secondary

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

accent

#87CEEB provides a slightly more vibrant accent for interactive elements or key information, ensuring visibility.

background

#F0F8FF 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.
  • #87CEEB offers slightly better contrast for larger headings or graphic elements when paired with #F0F8FF.
  • Consider larger font sizes for any text rendered in the lighter palette colors to improve readability.

Recommended combinations

Clear Sky

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

#F0F8FF · #87CEEB · #ADD8E6

Soft Horizon

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

#ADD8E6 · #B0E0E6 · #C1F1F7

Refreshing UI

Use #F0F8FF as a main background, with #ADD8E6 for secondary elements and #87CEEB for interactive components.

#F0F8FF · #ADD8E6 · #87CEEB

CSS variables

:root {
  --celestial-glow-1: #F0F8FF;
  --celestial-glow-2: #ADD8E6;
  --celestial-glow-3: #87CEEB;
  --celestial-glow-4: #B0E0E6;
  --celestial-glow-5: #C1F1F7;
}

Tailwind config

theme: {
  extend: {
    colors: {
      "celestial-glow": {
        1: "#F0F8FF",
        2: "#ADD8E6",
        3: "#87CEEB",
        4: "#B0E0E6",
        5: "#C1F1F7",
      }
    }
  }
}

Related searches

light blue color schemeethereal web designcalm UI palettesky blue brandingairy website colors

Palette colors

Hex values

Color 1#F0F8FF
·
Color 2#ADD8E6
·
Color 3#87CEEB
·
Color 4#B0E0E6
·
Color 5#C1F1F7
·

Accessibility

Contrast checker

1
2
3
4
5
1
1.4:1Fail
1.6:1Fail
1.3:1Fail
1.1:1Fail
2
1.4:1Fail
1.1:1Fail
1.1:1Fail
1.3:1Fail
3
1.6:1Fail
1.1:1Fail
1.2:1Fail
1.4:1Fail
4
1.3:1Fail
1.1:1Fail
1.2:1Fail
1.2:1Fail
5
1.1:1Fail
1.3:1Fail
1.4:1Fail
1.2:1Fail

Similar palettes

More like Celestial Glow

View all cool
Celestial Azure Drift
Celestial Cloud Dust
Cloudspun Serenity
Ethereal Sky Veil
Skyward Echoes
Arctic Sky Aurora