Palette

Celestial Ocean Mirror

Deep blues mirroring a starlit ocean, creating a vast and ethereal reflective surface.

coolcalm5 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

#191970#4169E1#6495ED#ADD8E6#E0FFFF

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 deep indigo #191970 to the ethereal aqua #E0FFFF, this collection offers a serene and dreamy gradient. The harmonious progression through royal blue #4169E1 and cornflower blue #6495ED 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

Meditation or mindfulness apps
Luxury spa or wellness retreats
High-end educational platforms (oceanography/astronomy)
Marine conservation websites
Dream-themed digital art or content
Serene corporate branding

Suggested color roles

primary

#191970 provides a stable, deep indigo foundation for main content areas or brand identity.

secondary

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

accent

#E0FFFF delivers a luminous, ethereal aqua, ideal for delicate highlights, hover states, or subtle glows.

background

#ADD8E6 or #E0FFFF create a very light, airy, and expansive canvas. #191970 for a deep background.

text

Use a dark color like charcoal or black on the lighter backgrounds. For darker elements, use #E0FFFF or white.

Accessibility notes

Ensure dark text (e.g., #333333) has sufficient contrast on #ADD8E6 and #E0FFFF.
White or #E0FFFF provides excellent contrast on #191970 and #4169E1.
Avoid using #ADD8E6 for small text on #6495ED as contrast might be borderline.
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.

#191970 · #4169E1 · #E0FFFF

Ocean Waves

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

#4169E1 · #6495ED · #ADD8E6

Sky Mirror

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

#191970 · #ADD8E6 · #E0FFFF

CSS variables

:root {
  --celestial-ocean-mirror-2-1: #191970;
  --celestial-ocean-mirror-2-2: #4169E1;
  --celestial-ocean-mirror-2-3: #6495ED;
  --celestial-ocean-mirror-2-4: #ADD8E6;
  --celestial-ocean-mirror-2-5: #E0FFFF;
}

Tailwind config

theme: {
  extend: {
    colors: {
      "celestial-ocean-mirror-2": {
        1: "#191970",
        2: "#4169E1",
        3: "#6495ED",
        4: "#ADD8E6",
        5: "#E0FFFF",
      }
    }
  }
}

Hex values

Color 1#191970

Color 2#4169E1

Color 3#6495ED

Color 4#ADD8E6

Color 5#E0FFFF

Accessibility

Contrast checker

3.1:1AA18

5:1AA

9.7:1AAA

14.1:1AAA

3.1:1AA18

1.6:1Fail

3.2:1AA18

4.6:1AA

5:1AA

1.6:1Fail

1.9:1Fail

2.8:1Fail

9.7:1AAA

3.2:1AA18

1.9:1Fail

1.4:1Fail

14.1:1AAA

4.6:1AA

2.8:1Fail

1.4:1Fail

Similar palettes

More like Celestial Ocean Mirror

View all cool

Celestial Ocean Dream

Abyssal Blue Descent

Abyssal Current Glide

Aqua Ocean Dream

Azure Abyss Calm

Azure Canopy Light