Back to palettes

Palette

Celestial Ocean Depth

Where the deep indigo of the ocean meets the vast, starlit expanse of the cosmos.

coolelegant5 colors
More cool palettes

Preview

See it in context.

Interface

New

Ready when you are.

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

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

Data visualization

#000080#191970#4682B4#6A5ACD#87CEEB

Palette guide

How to use Celestial Ocean Depth

Overview

The Celestial Ocean Depth palette beautifully merges the deep indigo of the ocean with the vast, starlit expanse of the cosmos. Ranging from the profound navy #000080 to the ethereal sky blue #87CEEB, this collection offers a rich, cool spectrum. The inclusion of steel blue #4682B4 and periwinkle #6A5ACD creates harmonious transitions and visual interest. Designers can leverage this palette to evoke elegance, mystery, and a sense of boundless tranquility. Developers will find these precise hex codes perfect for crafting sophisticated dark mode themes, immersive backgrounds, or serene user interfaces.

Best used for

  • Luxury cruise lines or marine conservation
  • High-end science or astronomy websites
  • Meditation or relaxation apps
  • Elegant dark mode applications
  • Space-themed educational content
  • Mystical or fantasy digital art

Suggested color roles

primary

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

secondary

#4682B4 offers a sophisticated steel blue for secondary panels, headers, or prominent text.

accent

#87CEEB delivers a luminous sky blue, ideal for calls-to-action, interactive elements, or subtle glow effects.

background

#000080 or #191970 create the deepest, most immersive "ocean depth" backdrop.

text

Use white or a very light blue like #87CEEB for primary text on the darkest backgrounds.

Accessibility notes

  • Ensure white or very light text (e.g., #87CEEB) provides sufficient contrast on #000080 and #191970.
  • Avoid using #6A5ACD for small text on #4682B4 as contrast might be borderline.
  • All interactive elements must meet WCAG contrast guidelines; consider a bright white outline for focus states.
  • For longer text blocks, prioritize the lightest colors from the palette or pure white against the dark backgrounds.

Recommended combinations

Deep Cosmic

Ideal for hero sections, conveying depth and celestial light.

#000080 · #4682B4 · #87CEEB

Ocean Twilight

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

#191970 · #6A5ACD · #87CEEB

Mystical Embrace

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

#000080 · #191970 · #6A5ACD

CSS variables

:root {
  --celestial-ocean-depth-2-1: #000080;
  --celestial-ocean-depth-2-2: #191970;
  --celestial-ocean-depth-2-3: #4682B4;
  --celestial-ocean-depth-2-4: #6A5ACD;
  --celestial-ocean-depth-2-5: #87CEEB;
}

Tailwind config

theme: {
  extend: {
    colors: {
      "celestial-ocean-depth-2": {
        1: "#000080",
        2: "#191970",
        3: "#4682B4",
        4: "#6A5ACD",
        5: "#87CEEB",
      }
    }
  }
}

Related searches

deep ocean blue palettecelestial navy colorsmystical blue UIelegant dark blue themestarlit ocean branding

Palette colors

Hex values

Color 1#000080
·
Color 2#191970
·
Color 3#4682B4
·
Color 4#6A5ACD
·
Color 5#87CEEB
·

Accessibility

Contrast checker

1
2
3
4
5
1
1.1:1Fail
3.9:1AA18
3:1AA18
9.2:1AAA
2
1.1:1Fail
3.6:1AA18
2.8:1Fail
8.5:1AAA
3
3.9:1AA18
3.6:1AA18
1.3:1Fail
2.4:1Fail
4
3:1AA18
2.8:1Fail
1.3:1Fail
3:1AA18
5
9.2:1AAA
8.5:1AAA
2.4:1Fail
3:1AA18

Similar palettes

More like Celestial Ocean Depth

View all cool
Aqua Jewel
Celestial Ocean Mirror
Enchanted Ocean Shimmer
Sapphire Glimmer Reef
Azure Sapphire Gleam
Celestial Ocean Horizon