Back to palettes

Palette

Ocean Depth Mysteries

A deep gradient of blues, transitioning from the dark abyss to the sun-drenched surface of the sea.

coolcalm5 colors
More cool palettes

Preview

See it in context.

Interface

New

Ready when you are.

A quick look at how Ocean Depth Mysteries 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 Ocean Depth Mysteries.

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

Data visualization

#00223A#0A3D5E#1F6A8B#3D99C0#6ED6EE

Palette guide

How to use Ocean Depth Mysteries

Overview

The Ocean Depth Mysteries palette presents a deep gradient of blues, smoothly transitioning from the dark abyss to the sun-drenched surface of the sea. Featuring the profound #00223A and #0A3D5E, it grounds designs in a sense of calm and mystery. Progressing to the more inviting #1F6A8B and #3D99C0, and finally culminating in the ethereal #6ED6EE, this palette offers immense versatility. Designers and developers can utilize these hex codes to craft immersive digital experiences, serene branding, or captivating visual narratives. It's an ideal choice for projects that aim to evoke tranquility, exploration, and the serene beauty of marine environments.

Best used for

  • Documentaries and media on oceanography
  • Scientific and research institution websites
  • Travel agencies specializing in cruises or diving
  • Meditation and mindfulness apps
  • Environmental and conservation initiatives
  • Elegant personal branding or portfolios

Suggested color roles

primary

Designate #00223A for core branding elements, main navigation, or large background areas, establishing a deep, mysterious foundation.

secondary

Utilize #0A3D5E for supporting content blocks, subheadings, or secondary interactive elements, offering a harmonious depth.

accent

Employ #6ED6EE to highlight key information, call-to-action buttons, or vibrant illustrations, providing a bright, airy focal point.

background

The darkest #00223A creates an immersive background, while #3D99C0 can serve as a lighter, expansive content background.

text

For dark backgrounds like #00223A, #0A3D5E, and #1F6A8B, use white or a very light grey text. On lighter shades like #6ED6EE, use #00223A or black for optimal readability.

Accessibility notes

  • White text on #00223A, #0A3D5E, and #1F6A8B should meet contrast standards.
  • Ensure sufficient contrast for dark text on #3D99C0 and #6ED6EE; black or a very dark blue is recommended.
  • Avoid using #1F6A8B for text on #3D99C0 background without careful contrast testing, especially for smaller fonts.
  • Consider larger font sizes for text elements that use lighter blues against similar mid-tone backgrounds to improve legibility.

Recommended combinations

Deep Ascent

Perfect for creating a profound, layered effect in backgrounds, large headers, or subtle UI gradients, mimicking deep water.

#00223A · #0A3D5E · #1F6A8B

Surface Glow

Ideal for a fresh, airy feel in content cards, infographics, or sections requiring more visual lightness, like sunlight on water.

#1F6A8B · #3D99C0 · #6ED6EE

Mystery & Clarity

Use #0A3D5E as a main background, #6ED6EE for highlights or primary text, and #00223A for very dark text or subtle accents.

#0A3D5E · #6ED6EE · #00223A

CSS variables

:root {
  --ocean-depth-mysteries-1: #00223A;
  --ocean-depth-mysteries-2: #0A3D5E;
  --ocean-depth-mysteries-3: #1F6A8B;
  --ocean-depth-mysteries-4: #3D99C0;
  --ocean-depth-mysteries-5: #6ED6EE;
}

Tailwind config

theme: {
  extend: {
    colors: {
      "ocean-depth-mysteries": {
        1: "#00223A",
        2: "#0A3D5E",
        3: "#1F6A8B",
        4: "#3D99C0",
        5: "#6ED6EE",
      }
    }
  }
}

Related searches

ocean depth blue palettemarine gradient color schemecalm water web designdeep sea mysterious colorsserene blue hex codes

Palette colors

Hex values

Color 1#00223A
·
Color 2#0A3D5E
·
Color 3#1F6A8B
·
Color 4#3D99C0
·
Color 5#6ED6EE
·

Accessibility

Contrast checker

1
2
3
4
5
1
1.4:1Fail
2.7:1Fail
5.1:1AA
9.7:1AAA
2
1.4:1Fail
1.9:1Fail
3.5:1AA18
6.8:1AA
3
2.7:1Fail
1.9:1Fail
1.9:1Fail
3.6:1AA18
4
5.1:1AA
3.5:1AA18
1.9:1Fail
1.9:1Fail
5
9.7:1AAA
6.8:1AA
3.6:1AA18
1.9:1Fail

Similar palettes

More like Ocean Depth Mysteries

View all cool
Abyssal Current Glide
Azure Abyss Calm
Azure Coast Serenity
Calm Ocean Swell
Coastal Seafoam Spray
Cobalt Ocean Depths