Back to palettes

Palette

Blue Ocean Abyss

Plunges into the mysterious, profound depths of the ocean, with a chilling elegance.

CoolDark5 colors
More Cool palettes

Preview

See it in context.

Interface

New

Ready when you are.

A quick look at how Blue Ocean Abyss 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 Blue Ocean Abyss.

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

Data visualization

#0A1C2B#1B3E5C#2F6A8F#4C99C6#7AC0E8

Palette guide

How to use Blue Ocean Abyss

Overview

The Blue Ocean Abyss palette plunges into the mysterious, profound depths of the ocean, with a chilling elegance. Featuring deep, dark blues like #0A1C2B, #1B3E5C, and #2F6A8F, gradually lightening to #4C99C6 and #7AC0E8, this palette creates an immersive and sophisticated aesthetic. It's an exceptional choice for designers aiming to convey mystery, depth, and a touch of ethereal light. The harmonious progression of blue tones makes it ideal for projects that require a serene, aquatic, and effortlessly beautiful visual language, reminiscent of the vast, unexplored ocean.

Best used for

  • Dark mode interfaces and applications
  • Luxury marine branding and websites
  • Sci-fi themes and game environments
  • Deep-sea exploration content
  • Sophisticated digital art and illustrations
  • Evening event themes and decor

Suggested color roles

primary

Use #0A1C2B as the deepest, mysterious base for backgrounds or large containers, establishing an immersive ambiance.

secondary

Employ #1B3E5C for main content blocks or panels, offering a rich, dark blue that supports the profound theme.

accent

Apply #7AC0E8 for light, ethereal highlights, interactive elements, or decorative touches, adding a touch of luminosity.

background

Choose #0A1C2B for a profound dark mode, creating an expansive and focused user experience.

text

For optimal readability on dark backgrounds, use #7AC0E8 or a crisp white. Lighter blues like #4C99C6 can be used for secondary text.

Accessibility notes

  • Crucially, ensure all text has sufficient contrast against dark backgrounds; light text is essential for legibility.
  • Check readability of #4C99C6 on #2F6A8F if used together; ensure sufficient color difference for clarity.
  • Avoid using light blue text on similar blue backgrounds; always test contrast ratios for all text sizes.
  • Clearly define interactive elements with distinct color changes or outlines to improve user experience.

Recommended combinations

Abyss Depths

Creates a gradual deep blue transition, ideal for immersive backgrounds or cinematic intros.

#0A1C2B · #1B3E5C · #2F6A8F

Ethereal Glow

Highlights mysterious elements, perfect for focus points or ethereal effects.

#0A1C2B · #7AC0E8 · #4C99C6

Deep Sea UI

Offers a dynamic pairing for feature sections or dramatic transitions in a digital interface.

#1B3E5C · #7AC0E8 · #2F6A8F

CSS variables

:root {
  --blue-ocean-abyss-1: #0A1C2B;
  --blue-ocean-abyss-2: #1B3E5C;
  --blue-ocean-abyss-3: #2F6A8F;
  --blue-ocean-abyss-4: #4C99C6;
  --blue-ocean-abyss-5: #7AC0E8;
}

Tailwind config

theme: {
  extend: {
    colors: {
      "blue-ocean-abyss": {
        1: "#0A1C2B",
        2: "#1B3E5C",
        3: "#2F6A8F",
        4: "#4C99C6",
        5: "#7AC0E8",
      }
    }
  }
}

Related searches

deep blue ocean palettemysterious dark bluecool sea depthselegant dark modeprofound aquatic colors

Palette colors

Hex values

Color 1#0A1C2B
·
Color 2#1B3E5C
·
Color 3#2F6A8F
·
Color 4#4C99C6
·
Color 5#7AC0E8
·

Accessibility

Contrast checker

1
2
3
4
5
1
1.6:1Fail
2.9:1Fail
5.5:1AA
8.7:1AAA
2
1.6:1Fail
1.9:1Fail
3.5:1AA18
5.6:1AA
3
2.9:1Fail
1.9:1Fail
1.9:1Fail
2.9:1Fail
4
5.5:1AA
3.5:1AA18
1.9:1Fail
1.6:1Fail
5
8.7:1AAA
5.6:1AA
2.9:1Fail
1.6:1Fail

Similar palettes

More like Blue Ocean Abyss

View all Cool
Winter Glacier Depth
Cosmic Night Hues
Ocean Dreamscape
Abyssal Bioluminescence
Abyssal Current Flow
Abyssal Seaweed Garden