Back to palettes

Palette

Celestial Ocean Mirror

A deep and reflective palette, capturing the cosmic blues of an ocean mirroring the night sky.

coolelegant5 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

#0A2E3D#1F4E64#3D7C9A#65B4D6#061A25

Palette guide

How to use Celestial Ocean Mirror

Overview

This Celestial Ocean Mirror palette is a deep and reflective collection, capturing the cosmic blues of an ocean mirroring the night sky. Ranging from the ultra-deep #061A25 to the luminous cerulean #65B4D6, this collection offers immense depth and sophistication. The harmonious progression through #0A2E3D, #1F4E64, and #3D7C9A creates a natural gradient, ideal for immersive designs. Designers can leverage this palette to evoke a sense of profound calm and cosmic mystery, while developers will find these distinct hex codes perfect for crafting elegant dark mode interfaces or atmospheric digital environments.

Best used for

  • Luxury automotive or watch brands
  • High-end science or astronomy websites
  • Marine research or oceanography platforms
  • Elegant dark mode themes for professional tools
  • Photography portfolios showcasing dramatic imagery
  • Mysterious game environments or character design

Suggested color roles

primary

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

secondary

#3D7C9A offers a slightly brighter, yet still deep blue-green, suitable for supporting sections or interactive elements.

accent

#65B4D6 delivers a luminous, clear blue, ideal for calls-to-action, highlights, or key information against dark backgrounds.

background

#061A25 or #0A2E3D create the deepest, most immersive "mirror" backdrop.

text

Use white or #65B4D6 for primary text on these deep blue-green backgrounds to ensure readability.

Accessibility notes

  • Prioritize white or #65B4D6 for text on #061A25, #0A2E3D, and #1F4E64 to ensure sufficient contrast.
  • Avoid using the darker blues for text against each other, as contrast will be inadequate.
  • Ensure all interactive elements have clear visual indicators that meet WCAG contrast requirements.
  • For data visualization, use clear labels and patterns in addition to color to convey meaning.

Recommended combinations

Deep Reflect

Ideal for hero sections, combining extreme depth with a striking, luminous highlight.

#061A25 · #3D7C9A · #65B4D6

Ocean Layers

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

#0A2E3D · #1F4E64 · #3D7C9A

Cosmic Glimmer

Suitable for interactive elements or visual effects that need to stand out with a clear, bright presence.

#1F4E64 · #3D7C9A · #65B4D6

CSS variables

:root {
  --celestial-ocean-mirror-3-1: #0A2E3D;
  --celestial-ocean-mirror-3-2: #1F4E64;
  --celestial-ocean-mirror-3-3: #3D7C9A;
  --celestial-ocean-mirror-3-4: #65B4D6;
  --celestial-ocean-mirror-3-5: #061A25;
}

Tailwind config

theme: {
  extend: {
    colors: {
      "celestial-ocean-mirror-3": {
        1: "#0A2E3D",
        2: "#1F4E64",
        3: "#3D7C9A",
        4: "#65B4D6",
        5: "#061A25",
      }
    }
  }
}

Related searches

deep teal blue palettecelestial ocean mirror UImysterious dark modeluxury blue green brandingwater galaxy reflection

Palette colors

Hex values

Color 1#0A2E3D
·
Color 2#1F4E64
·
Color 3#3D7C9A
·
Color 4#65B4D6
·
Color 5#061A25
·

Accessibility

Contrast checker

1
2
3
4
5
1
1.6:1Fail
3.1:1AA18
6.2:1AA
1.2:1Fail
2
1.6:1Fail
2:1Fail
3.9:1AA18
2:1Fail
3
3.1:1AA18
2:1Fail
2:1Fail
3.8:1AA18
4
6.2:1AA
3.9:1AA18
2:1Fail
7.7:1AAA
5
1.2:1Fail
2:1Fail
3.8:1AA18
7.7:1AAA

Similar palettes

More like Celestial Ocean Mirror

View all cool