Palette

Celestial Ocean Embrace

A tranquil blend of deep navy and light blues, reminiscent of a starry night reflecting on calm ocean waters.

coolcalm5 colors

More cool palettes

Preview

See it in context.

Interface

New

Ready when you are.

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

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

Data visualization

#000080#4169E1#87CEFA#E6E6FA#FFFFFF

Palette guide

How to use Celestial Ocean Embrace

Overview

The Celestial Ocean Embrace palette is a tranquil blend of deep navy and light blues, reminiscent of a starry night reflecting on calm ocean waters. From the profound #000080 to pure white #FFFFFF, this collection offers a clear, serene progression. The inclusion of royal blue #4169E1 and light sky blue #87CEFA creates harmonious depth and visual interest. Designers can leverage this palette to evoke calm, purity, and a sense of boundless peace. Developers will find these distinct hex codes perfect for crafting clean, sophisticated interfaces, particularly for projects aiming for an elegant and refreshing, yet deep, aesthetic.

Best used for

Winter-themed websites or marketing
Luxury spa or wellness retreats
High-end educational platforms
Marine conservation initiatives
Elegant corporate branding
Meditation and mindfulness apps

Suggested color roles

primary

#000080 provides a commanding deep navy base for backgrounds or main structural elements.

secondary

#4169E1 offers a vibrant royal blue for secondary panels, headers, or prominent text.

accent

#FFFFFF delivers pure white, ideal for calls-to-action, key highlights, or primary text on dark backgrounds.

background

#E6E6FA creates a very light, almost white, airy canvas, or #000080 for a deep, immersive background.

text

Use white for primary text on dark backgrounds, and a dark neutral (e.g., #333333) on lighter backgrounds.

Accessibility notes

White (#FFFFFF) provides excellent contrast on #000080 and #4169E1.
Ensure dark text (e.g., black or charcoal) has sufficient contrast on #E6E6FA and #87CEFA.
Avoid using #87CEFA for small text on #E6E6FA as contrast will be insufficient.
All interactive elements must meet WCAG contrast guidelines for both color and focus states.

Recommended combinations

Night Reflection

Ideal for hero sections, combining deep blue with stark, clean white for impact.

#000080 · #4169E1 · #FFFFFF

Ocean Breeze

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

#E6E6FA · #87CEFA · #4169E1

Serene Embrace

Creates a cohesive and calming aesthetic, suitable for intros or atmospheric backgrounds.

#000080 · #87CEFA · #E6E6FA

CSS variables

:root {
  --celestial-ocean-embrace-1: #000080;
  --celestial-ocean-embrace-2: #4169E1;
  --celestial-ocean-embrace-3: #87CEFA;
  --celestial-ocean-embrace-4: #E6E6FA;
  --celestial-ocean-embrace-5: #FFFFFF;
}

Tailwind config

theme: {
  extend: {
    colors: {
      "celestial-ocean-embrace": {
        1: "#000080",
        2: "#4169E1",
        3: "#87CEFA",
        4: "#E6E6FA",
        5: "#FFFFFF",
      }
    }
  }
}

Hex values

Color 1#000080

Color 2#4169E1

Color 3#87CEFA

Color 4#E6E6FA

Color 5#FFFFFF

Accessibility

Contrast checker

3.3:1AA18

9.3:1AAA

13:1AAA

16:1AAA

3.3:1AA18

2.8:1Fail

3.9:1AA18

4.8:1AA

9.3:1AAA

2.8:1Fail

1.4:1Fail

1.7:1Fail

13:1AAA

3.9:1AA18

1.4:1Fail

1.2:1Fail

16:1AAA

4.8:1AA

1.7:1Fail

1.2:1Fail

Similar palettes

More like Celestial Ocean Embrace

View all cool

Abyssal Current Glide

Arctic Dawn Light

Celestial Ocean Dream

Celestial Ocean Twilight

Clear Night Chill

Cobalt Ocean Depths