Palette

Celestial Ocean Horizon

Captures the vast, merging blues of a starlit ocean meeting a celestial sky at twilight.

coolelegant5 colors

More cool palettes

Preview

See it in context.

Interface

New

Ready when you are.

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

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

Data visualization

#0F1E3A#2A4B7D#5B8BC2#90BDED#E0EAF4

Palette guide

How to use Celestial Ocean Horizon

Overview

The Celestial Ocean Horizon palette beautifully captures the vast, merging blues of a starlit ocean meeting a celestial sky at twilight. Ranging from the deep navy #0F1E3A to the soft, almost white #E0EAF4, this collection offers an elegant and serene gradient. The harmonious progression through #2A4B7D, #5B8BC2, and #90BDED creates a smooth visual flow, ideal for sophisticated designs. Designers can leverage this palette to evoke tranquility, openness, and a sense of boundless possibility. Developers will find these distinct hex codes perfect for crafting clean, professional interfaces, soft backgrounds, and readable text in both light and dark contexts.

Best used for

Luxury travel agencies (ocean/sky focus)
Corporate websites with a modern, clean aesthetic
Environmental or scientific research platforms
High-end educational content
Meditation and wellness applications
Cloud computing service interfaces

Suggested color roles

primary

#2A4B7D provides a strong, deep blue foundation for main content areas or brand identity.

secondary

#5B8BC2 offers a balanced mid-tone blue, suitable for headers, sub-sections, or interactive elements.

accent

#E0EAF4 delivers a luminous, very light blue, ideal for delicate highlights, primary text on darks, or subtle glows.

background

#0F1E3A creates a profound, dark horizon backdrop, or #E0EAF4 for a very light, airy canvas.

text

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

Accessibility notes

Ensure white or very light text (e.g., #E0EAF4) provides sufficient contrast on #0F1E3A and #2A4B7D.
Avoid using #90BDED for small text on #5B8BC2 as the contrast might be insufficient.
For lighter backgrounds like #E0EAF4, use a dark neutral text color (e.g., #222222) for optimal readability.
All interactive elements must meet WCAG contrast guidelines for both color and focus states.

Recommended combinations

Twilight Horizon

Ideal for hero sections, conveying depth and ethereal light where sky meets ocean.

#0F1E3A · #5B8BC2 · #E0EAF4

Ocean Gradient

Excellent for layered UI elements or subtle background gradients, creating a sense of natural progression.

#2A4B7D · #5B8BC2 · #90BDED

Starlit Calm

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

#0F1E3A · #90BDED · #E0EAF4

CSS variables

:root {
  --celestial-ocean-horizon-1: #0F1E3A;
  --celestial-ocean-horizon-2: #2A4B7D;
  --celestial-ocean-horizon-3: #5B8BC2;
  --celestial-ocean-horizon-4: #90BDED;
  --celestial-ocean-horizon-5: #E0EAF4;
}

Tailwind config

theme: {
  extend: {
    colors: {
      "celestial-ocean-horizon": {
        1: "#0F1E3A",
        2: "#2A4B7D",
        3: "#5B8BC2",
        4: "#90BDED",
        5: "#E0EAF4",
      }
    }
  }
}

Hex values

Color 1#0F1E3A

Color 2#2A4B7D

Color 3#5B8BC2

Color 4#90BDED

Color 5#E0EAF4

Accessibility

Contrast checker

1.9:1Fail

4.7:1AA

8.4:1AAA

13.6:1AAA

1.9:1Fail

2.5:1Fail

4.5:1AA18

7.2:1AAA

4.7:1AA

2.5:1Fail

1.8:1Fail

2.9:1Fail

8.4:1AAA

4.5:1AA18

1.8:1Fail

1.6:1Fail

13.6:1AAA

7.2:1AAA

2.9:1Fail

1.6:1Fail

Similar palettes

More like Celestial Ocean Horizon

View all cool

Aqua Jewel

Astral Glow Veil

Aurora Horizon Whisper

Aurora Sky Glow

Celestial Ocean Depth

Cityscape Twilight Azure