Palette

Celestial Ocean Gaze

Evokes the tranquil depths of the ocean under a clear, starlit sky.

coolcalm5 colors

More cool palettes

Preview

See it in context.

Interface

New

Ready when you are.

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

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

Data visualization

#0F0F3D#34495E#5D7B8C#A4C6DE#D6EFFE

Palette guide

How to use Celestial Ocean Gaze

Overview

The Celestial Ocean Gaze palette evokes the tranquil depths of the ocean under a clear, starlit sky, offering a calming gradient of cool blues and grays. Ranging from the profound #0F0F3D to the airy #D6EFFE, this collection is perfect for designs that prioritize serenity, clarity, and a sense of expansive calm. The harmonious progression through #34495E, #5D7B8C, and #A4C6DE provides ample opportunity for depth and visual interest without harsh contrasts. Designers can leverage this palette to create soothing, professional interfaces, while developers will find these distinct hex codes perfect for crafting elegant light or dark mode themes.

Best used for

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

Suggested color roles

primary

#34495E provides a deep, sophisticated blue-gray foundation for main content areas or brand identity.

secondary

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

accent

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

background

#0F0F3D creates a profound, dark cosmic backdrop, or #D6EFFE for a very light, airy canvas.

text

Use #D6EFFE or white for primary text on dark backgrounds. Use a dark neutral (e.g., black or charcoal) on lighter backgrounds.

Accessibility notes

Ensure white or very light text (e.g., #D6EFFE) provides sufficient contrast on #0F0F3D and #34495E.
Avoid using #A4C6DE for small text on #5D7B8C as the contrast might be insufficient.
For lighter backgrounds like #D6EFFE, 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

Deep Gaze

Ideal for hero sections, conveying depth and ethereal light.

#0F0F3D · #5D7B8C · #D6EFFE

Ocean Layers

Excellent for layered UI elements, showcasing a smooth transition from deep to lighter blue-grays.

#34495E · #5D7B8C · #A4C6DE

Starlit Horizon

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

#0F0F3D · #A4C6DE · #D6EFFE

CSS variables

:root {
  --celestial-ocean-gaze-1: #0F0F3D;
  --celestial-ocean-gaze-2: #34495E;
  --celestial-ocean-gaze-3: #5D7B8C;
  --celestial-ocean-gaze-4: #A4C6DE;
  --celestial-ocean-gaze-5: #D6EFFE;
}

Tailwind config

theme: {
  extend: {
    colors: {
      "celestial-ocean-gaze": {
        1: "#0F0F3D",
        2: "#34495E",
        3: "#5D7B8C",
        4: "#A4C6DE",
        5: "#D6EFFE",
      }
    }
  }
}

Hex values

Color 1#0F0F3D

Color 2#34495E

Color 3#5D7B8C

Color 4#A4C6DE

Color 5#D6EFFE

Accessibility

Contrast checker

2:1Fail

4:1AA18

10.1:1AAA

15.3:1AAA

2:1Fail

2.1:1Fail

5.2:1AA

7.8:1AAA

4:1AA18

2.1:1Fail

2.5:1Fail

3.8:1AA18

10.1:1AAA

5.2:1AA

2.5:1Fail

1.5:1Fail

15.3:1AAA

7.8:1AAA

3.8:1AA18

1.5:1Fail

Similar palettes

More like Celestial Ocean Gaze

Calm Lake Reflections

Calm Ocean Swell