Palette

Celestial Ocean Twilight

The serene gradient of the ocean at twilight, blending deep blues from the sea to the darkening sky.

coolcalm5 colors

More cool palettes

Preview

See it in context.

Interface

New

Ready when you are.

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

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

Data visualization

#0E1E2C#1C365C#2B578E#477DBA#80B3E8

Palette guide

How to use Celestial Ocean Twilight

Overview

The Celestial Ocean Twilight palette captures the serene gradient of the ocean at twilight, blending deep blues from the sea to the darkening sky. Ranging from the profound #0E1E2C to the softest #80B3E8, this collection offers a harmonious gradient ideal for calming and sophisticated designs. The progression through #1C365C, #2B578E, and #477DBA creates a smooth visual flow, perfect for interfaces that prioritize user comfort and clarity. Designers can leverage this palette to evoke tranquility, openness, 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 both light and dark contexts.

Best used for

Meditation or mindfulness apps
Luxury travel agencies (ocean/sky focus)
Scientific or educational content (astronomy/marine)
Professional corporate websites
Cloud computing interfaces
Clean, minimalist design portfolios

Suggested color roles

primary

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

secondary

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

accent

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

background

#0E1E2C creates a profound, dark twilight backdrop, or #80B3E8 for a very light, airy canvas.

text

Use #80B3E8 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., #80B3E8) provides sufficient contrast on #0E1E2C and #1C365C.
Avoid using #477DBA for small text on #2B578E as the contrast might be insufficient.
For lighter backgrounds like #80B3E8, 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 Depths

Ideal for hero sections, conveying depth and ethereal light.

#0E1E2C · #2B578E · #80B3E8

Ocean Gradient

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

#1C365C · #2B578E · #477DBA

Sky Serenity

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

#0E1E2C · #477DBA · #80B3E8

CSS variables

:root {
  --celestial-ocean-twilight-1: #0E1E2C;
  --celestial-ocean-twilight-2: #1C365C;
  --celestial-ocean-twilight-3: #2B578E;
  --celestial-ocean-twilight-4: #477DBA;
  --celestial-ocean-twilight-5: #80B3E8;
}

Tailwind config

theme: {
  extend: {
    colors: {
      "celestial-ocean-twilight": {
        1: "#0E1E2C",
        2: "#1C365C",
        3: "#2B578E",
        4: "#477DBA",
        5: "#80B3E8",
      }
    }
  }
}

Hex values

Color 1#0E1E2C

Color 2#1C365C

Color 3#2B578E

Color 4#477DBA

Color 5#80B3E8

Accessibility

Contrast checker

1.4:1Fail

2.3:1Fail

4:1AA18

7.7:1AAA

1.4:1Fail

1.6:1Fail

2.8:1Fail

5.5:1AA

2.3:1Fail

1.6:1Fail

1.7:1Fail

3.3:1AA18

4:1AA18

2.8:1Fail

1.7:1Fail

1.9:1Fail

7.7:1AAA

5.5:1AA

3.3:1AA18

1.9:1Fail

Similar palettes

More like Celestial Ocean Twilight

View all cool

Oceanic Twilight

Abyssal Blue Descent

Abyssal Current Glide

Azure Abyss Calm

Azure Canopy Light

Azure Horizon