Palette

Celestial Ocean Mirror

Reflects the infinite blue expanse where cosmic and oceanic depths meet in shimmering harmony.

coolnatural5 colors

More cool palettes

Preview

See it in context.

Interface

New

Ready when you are.

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

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

Data visualization

#000033#000080#4169E1#87CEEB#ADD8E6

Palette guide

How to use Celestial Ocean Mirror

Overview

The Celestial Ocean Mirror palette reflects the infinite blue expanse where cosmic and oceanic depths meet in shimmering harmony. Ranging from the ultra-deep #000033 to the light sky blue #ADD8E6, this collection offers a natural and mystical gradient. The harmonious progression through navy #000080 and royal blue #4169E1 creates a smooth visual flow, ideal for tranquil designs. Designers can leverage this palette to evoke calm, depth, 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 a light mode setting.

Best used for

Marine biology or oceanography websites
Astrology or spiritual wellness platforms
Meditation and mindfulness apps
Natural history museum exhibits (digital)
Eco-tourism or conservation initiatives
Serene corporate branding

Suggested color roles

primary

#000080 provides a stable, deep navy foundation for main content areas or brand identity.

secondary

#4169E1 offers a vibrant royal blue for headers, sub-sections, or interactive elements.

accent

#ADD8E6 delivers a luminous, light blue, ideal for delicate highlights, hover states, or subtle glows.

background

#000033 creates the deepest, most immersive backdrop. #ADD8E6 for a very light, airy canvas.

text

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

Accessibility notes

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

Recommended combinations

Deep Reflection

Ideal for hero sections, conveying depth and ethereal light.

#000033 · #4169E1 · #ADD8E6

Ocean Waves

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

#000080 · #4169E1 · #87CEEB

Sky Mirror

Creates a very light and airy aesthetic with a deep anchor, suitable for intros or delicate information displays.

#000033 · #87CEEB · #ADD8E6

CSS variables

:root {
  --celestial-ocean-mirror-1: #000033;
  --celestial-ocean-mirror-2: #000080;
  --celestial-ocean-mirror-3: #4169E1;
  --celestial-ocean-mirror-4: #87CEEB;
  --celestial-ocean-mirror-5: #ADD8E6;
}

Tailwind config

theme: {
  extend: {
    colors: {
      "celestial-ocean-mirror": {
        1: "#000033",
        2: "#000080",
        3: "#4169E1",
        4: "#87CEEB",
        5: "#ADD8E6",
      }
    }
  }
}

Hex values

Color 1#000033

Color 2#000080

Color 3#4169E1

Color 4#87CEEB

Color 5#ADD8E6

Accessibility

Contrast checker

1.3:1Fail

4.1:1AA18

11.5:1AAA

13.1:1AAA

1.3:1Fail

3.3:1AA18

9.2:1AAA

10.5:1AAA

4.1:1AA18

3.3:1AA18

2.8:1Fail

3.2:1AA18

11.5:1AAA

9.2:1AAA

2.8:1Fail

1.1:1Fail

13.1:1AAA

10.5:1AAA

3.2:1AA18

1.1:1Fail

Similar palettes

More like Celestial Ocean Mirror