Back to palettes

Palette

Celestial Ocean Dream

A calming blend of blues and aquas, inspired by the deep ocean meeting a clear, vast sky.

coolcalm5 colors
More cool palettes

Preview

See it in context.

Interface

New

Ready when you are.

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

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

Data visualization

#4682B4#ADD8E6#87CEEB#B0C4DE#E0FFFF

Palette guide

How to use Celestial Ocean Dream

Overview

The Celestial Ocean Dream palette is a calming blend of blues and aquas, inspired by the deep ocean meeting a clear, vast sky. Ranging from the grounded steel blue #4682B4 to the airy, almost white #E0FFFF, this collection radiates serenity and openness. The harmonious intermediate shades like #ADD8E6 and #87CEEB create a seamless flow, ideal for light, refreshing designs. Designers can leverage this palette to evoke tranquility, clarity, and a sense of boundless peace. 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

  • Spa and wellness applications
  • Cloud computing dashboards
  • Environmental or marine conservation websites
  • Baby product branding or websites
  • Travel agencies focusing on coastal destinations
  • Educational platforms for a calming experience

Suggested color roles

primary

#4682B4 provides a stable, calming blue foundation for main content areas or brand identity.

secondary

#87CEEB offers a clear, inviting sky blue, suitable for headers, sub-sections, or interactive elements.

accent

#E0FFFF delivers a luminous, ethereal highlight, ideal for delicate details, hover states, or subtle glows.

background

#ADD8E6 or #B0C4DE 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 #E0FFFF or white.

Accessibility notes

  • Ensure dark text (e.g., #333333) has sufficient contrast on #ADD8E6, #87CEEB, #B0C4DE, and #E0FFFF.
  • Avoid using #E0FFFF or #B0C4DE for small text on very light backgrounds, as contrast will be poor.
  • #4682B4 text will have good contrast for text on #ADD8E6 and #E0FFFF.
  • Verify all interactive elements meet WCAG contrast guidelines, especially when using lighter blues for text.

Recommended combinations

Sky & Sea

Ideal for hero sections, conveying depth and ethereal light.

#4682B4 · #87CEEB · #E0FFFF

Calm Waters

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

#ADD8E6 · #B0C4DE · #4682B4

Cloud Whisper

Creates a very light and airy aesthetic, suitable for intros or delicate information displays.

#E0FFFF · #ADD8E6 · #87CEEB

CSS variables

:root {
  --celestial-ocean-dream-1: #4682B4;
  --celestial-ocean-dream-2: #ADD8E6;
  --celestial-ocean-dream-3: #87CEEB;
  --celestial-ocean-dream-4: #B0C4DE;
  --celestial-ocean-dream-5: #E0FFFF;
}

Tailwind config

theme: {
  extend: {
    colors: {
      "celestial-ocean-dream": {
        1: "#4682B4",
        2: "#ADD8E6",
        3: "#87CEEB",
        4: "#B0C4DE",
        5: "#E0FFFF",
      }
    }
  }
}

Related searches

calm blue aqua paletteserene ocean sky colorsdreamy light UI designethereal blue brandingwater and sky theme

Palette colors

Hex values

Color 1#4682B4
·
Color 2#ADD8E6
·
Color 3#87CEEB
·
Color 4#B0C4DE
·
Color 5#E0FFFF
·

Accessibility

Contrast checker

1
2
3
4
5
1
2.7:1Fail
2.4:1Fail
2.3:1Fail
3.9:1AA18
2
2.7:1Fail
1.1:1Fail
1.2:1Fail
1.4:1Fail
3
2.4:1Fail
1.1:1Fail
1:1Fail
1.7:1Fail
4
2.3:1Fail
1.2:1Fail
1:1Fail
1.7:1Fail
5
3.9:1AA18
1.4:1Fail
1.7:1Fail
1.7:1Fail

Similar palettes

More like Celestial Ocean Dream

View all cool
Abyssal Current Glide
Aegean Coast Whisper
Arctic Dawn Light
Arctic Sky Aurora
Azure Coast Serenity
Azure Horizon