Back to palettes

Palette

Celestial Shimmer

A serene journey through the lighter blues of the sky, shimmering with celestial grace.

coolcalm5 colors
More cool palettes

Preview

See it in context.

Interface

New

Ready when you are.

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

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

Data visualization

#D6EAF8#A9CCE3#7FB3D5#5499C7#2980B9

Palette guide

How to use Celestial Shimmer

Overview

The "Celestial Shimmer" palette offers a serene journey through the lighter blues of the sky, shimmering with celestial grace. Ranging from the airy #D6EAF8 and #A9CCE3, it deepens through #7FB3D5 and #5499C7, culminating in the rich #2980B9. This cool and calm palette is perfect for designs that aim to convey tranquility, clarity, and an ethereal, dreamy mood. Developers can utilize these harmonious shades for clean, inviting interfaces, while designers can craft refreshing branding or digital art that feels both expansive and comforting, ideal for themes related to water, sky, or peaceful contemplation.

Best used for

  • Cloud computing services
  • Spa and wellness branding
  • Nautical or marine themes
  • Children's book illustrations
  • Healthcare websites and apps
  • Environmental conservation campaigns

Suggested color roles

primary

#D6EAF8 - The lightest shade, providing an airy, clean background for a sense of openness.

secondary

#A9CCE3 - Use for secondary content areas, card backgrounds, or subtle divisions in a light interface.

accent

#2980B9 - The deepest blue, perfect for strong call-to-action buttons, important links, or impactful visual accents.

background

#D6EAF8 - The main background, creating a calm, light, and ethereal aesthetic.

text

#2980B9 - Excellent for main body text on lighter backgrounds like #D6EAF8 or #A9CCE3, ensuring high readability.

Accessibility notes

  • Text in #2980B9 on #D6EAF8 provides good contrast, ensuring readability for most users.
  • Ensure #5499C7 text on #A9CCE3 has sufficient contrast for WCAG AA compliance, especially for smaller fonts.
  • Avoid using #D6EAF8 for text on #A9CCE3 as the contrast will be insufficient.
  • Use #2980B9 for critical interactive elements to ensure clear visibility.

Recommended combinations

Sky Serenity

Creates a clean, calm look with clear hierarchy, ideal for professional or peaceful designs.

#D6EAF8 · #A9CCE3 · #2980B9

Ocean Depths

Excellent for smooth gradients that evoke water or sky, adding depth without harshness.

#A9CCE3 · #7FB3D5 · #5499C7

Clear Horizon

Use the deepest blue as a strong accent against light backgrounds for important information or branding.

#D6EAF8 · #5499C7 · #2980B9

CSS variables

:root {
  --celestial-shimmer-1: #D6EAF8;
  --celestial-shimmer-2: #A9CCE3;
  --celestial-shimmer-3: #7FB3D5;
  --celestial-shimmer-4: #5499C7;
  --celestial-shimmer-5: #2980B9;
}

Tailwind config

theme: {
  extend: {
    colors: {
      "celestial-shimmer": {
        1: "#D6EAF8",
        2: "#A9CCE3",
        3: "#7FB3D5",
        4: "#5499C7",
        5: "#2980B9",
      }
    }
  }
}

Related searches

light blue celestial paletteethereal sky colorscalm blue designdreamy cool huesserene blue shimmer

Palette colors

Hex values

Color 1#D6EAF8
·
Color 2#A9CCE3
·
Color 3#7FB3D5
·
Color 4#5499C7
·
Color 5#2980B9
·

Accessibility

Contrast checker

1
2
3
4
5
1
1.4:1Fail
1.8:1Fail
2.5:1Fail
3.5:1AA18
2
1.4:1Fail
1.3:1Fail
1.8:1Fail
2.5:1Fail
3
1.8:1Fail
1.3:1Fail
1.4:1Fail
1.9:1Fail
4
2.5:1Fail
1.8:1Fail
1.4:1Fail
1.4:1Fail
5
3.5:1AA18
2.5:1Fail
1.9:1Fail
1.4:1Fail

Similar palettes

More like Celestial Shimmer

View all cool
Celestial Aurora Dream
Celestial Aurora Whisper
Celestial Azure Drift
Celestial Cloud Dust
Celestial Glow
Celestial Oasis Dream