Back to palettes

Palette

Arctic Ocean Depths

The profound and chilling beauty of the Arctic ocean, from its darkest abysses to icy surface.

cooldark5 colors
More cool palettes

Preview

See it in context.

Interface

New

Ready when you are.

A quick look at how Arctic Ocean Depths 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 Arctic Ocean Depths.

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

Data visualization

#000080#0000CD#00BFFF#87CEFA#B0E0E6

Palette guide

How to use Arctic Ocean Depths

Overview

The Arctic Ocean Depths palette captures the profound and chilling beauty of the Arctic ocean, from its darkest abysses to icy surface. With a dramatic range from the profound #000080 to the luminous #B0E0E6, this collection offers designers and developers a deep, mysterious aesthetic perfect for conveying sophistication, depth, and a sense of wonder. The prominent #0000CD and #00BFFF provide a clear progression of cool tones, allowing for elegant visual hierarchies in UI design, impactful branding, and immersive digital experiences. It's an excellent choice for projects that aim to evoke professionalism, mystique, and a powerful, cool identity.

Best used for

  • Luxury tech branding
  • Sci-fi or fantasy game interfaces
  • Deep-sea exploration websites
  • High-end automotive design showcases
  • Abstract digital art displays
  • Corporate websites with a modern, serious tone

Suggested color roles

primary

#00BFFF (A vibrant, bright sky blue, excellent for main headings, crucial call-to-action buttons, or key UI elements that demand attention and convey energy.)

secondary

#0000CD (A rich, medium royal blue, ideal for subheadings, secondary interactive elements, or supporting graphical features, providing strong contrast.)

accent

#87CEFA (A light, serene sky blue, perfect for delicate highlights, hover states, or subtle design accents that need to glimmer against darker tones.)

background

#000080 (A very deep, dark navy blue, serving as a powerful and mysterious backdrop that enhances readability for lighter text and creates depth.)

text

#B0E0E6 (The lightest color in the palette, providing excellent contrast for body text on the darkest backgrounds, ensuring high readability.)

Accessibility notes

  • Ensure #B0E0E6 text on #000080 background meets WCAG AAA standards for optimal readability.
  • Avoid using #0000CD or #00BFFF for text on #000080 without checking contrast ratios carefully, especially for smaller text.
  • When using #00BFFF for interactive elements, ensure its contrast with surrounding background colors is adequate for focus states.
  • For critical information, always pair the lightest available color, #B0E0E6, with the darkest background, #000080.

Recommended combinations

Deep Luminous

Ideal for dark mode interfaces with luminous text and vibrant accents for calls to action.

#000080 · #B0E0E6 · #00BFFF

Ocean Depth

Use for creating visual depth in layered UI components, overlays, or complex graphical elements.

#0000CD · #00BFFF · #87CEFA

Sky Highlight

Apply the vibrant blue for focal points, with the darkest for background and the lightest for subtle highlights.

#00BFFF · #000080 · #B0E0E6

CSS variables

:root {
  --arctic-ocean-depths-1: #000080;
  --arctic-ocean-depths-2: #0000CD;
  --arctic-ocean-depths-3: #00BFFF;
  --arctic-ocean-depths-4: #87CEFA;
  --arctic-ocean-depths-5: #B0E0E6;
}

Tailwind config

theme: {
  extend: {
    colors: {
      "arctic-ocean-depths": {
        1: "#000080",
        2: "#0000CD",
        3: "#00BFFF",
        4: "#87CEFA",
        5: "#B0E0E6",
      }
    }
  }
}

Related searches

dark blue ocean palettearctic depths color schememysterious UI design bluedeep cool brandingwinter dark web colors

Palette colors

Hex values

Color 1#000080
·
Color 2#0000CD
·
Color 3#00BFFF
·
Color 4#87CEFA
·
Color 5#B0E0E6
·

Accessibility

Contrast checker

1
2
3
4
5
1
1.4:1Fail
7.5:1AAA
9.3:1AAA
11.2:1AAA
2
1.4:1Fail
5.3:1AA
6.5:1AA
7.8:1AAA
3
7.5:1AAA
5.3:1AA
1.2:1Fail
1.5:1Fail
4
9.3:1AAA
6.5:1AA
1.2:1Fail
1.2:1Fail
5
11.2:1AAA
7.8:1AAA
1.5:1Fail
1.2:1Fail

Similar palettes

More like Arctic Ocean Depths

View all cool
Cobalt Arctic Depth
Abyssal Bioluminescence
Abyssal Current Glide
Arctic Ice Cavern
Arctic Shore Twilight
Bioluminescent Abyss