Back to palettes

Palette

Ocean Current Abyss

Plunges into the dark, silent depths of the ocean, where currents flow with cool, enigmatic power.

darkdark5 colors
More dark palettes

Preview

See it in context.

Interface

New

Ready when you are.

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

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

Data visualization

#0B1D2C#1A3E5C#2E5C8A#4C7DAE#7AA1CC

Palette guide

How to use Ocean Current Abyss

Overview

The Ocean Current Abyss palette plunges into the dark, silent depths of the ocean, offering a mysterious and cool range of deep blues and near-blacks. Starting with the profound #0B1D2C, it flows through the intense #1A3E5C and #2E5C8A, then lightens to the atmospheric #4C7DAE and #7AA1CC. This collection is perfect for designs that aim to evoke mystery, sophistication, and depth. Designers and developers can leverage these cool, enigmatic tones for luxury branding, high-tech interfaces, or any project requiring a serious, immersive, and elegant aesthetic. It's excellent for creating a sense of calm power.

Best used for

  • Luxury tech brand interfaces
  • Deep sea exploration documentaries
  • High-end security software
  • Science fiction game environments
  • Sophisticated corporate websites
  • Abstract art platforms

Suggested color roles

primary

Use #0B1D2C as the dominant background color to establish a profound, dark, and mysterious foundation.

secondary

Employ #1A3E5C for secondary panels, headers, or card backgrounds, adding subtle layering and depth.

accent

Apply #7AA1CC for subtle highlights, interactive elements, or key information to provide a sophisticated, legible contrast.

background

The deepest #0B1D2C creates an immersive, sleek dark canvas, perfect for dramatic and elegant designs.

text

For readable body text on darker backgrounds, #4C7DAE or #7AA1CC works well. For maximum contrast, use white or a very light grey.

Accessibility notes

  • Ensure #7AA1CC text has sufficient contrast against #0B1D2C and #1A3E5C for optimal readability (WCAG AA/AAA).
  • Avoid using #2E5C8A text on #1A3E5C backgrounds for critical content due to potential low contrast.
  • Use #4C7DAE for less critical text or subtle UI elements, but always verify WCAG compliance.
  • Consider using a stark white for headings or very important call-to-action text on the darkest tones for maximum impact.

Recommended combinations

Deep Structure

A strong foundation for dark themes, with the lightest blue reserved for prominent text or interactive elements.

#0B1D2C · #1A3E5C · #7AA1CC

Abyssal Layers

Ideal for building visual hierarchy in complex layouts, such as nested cards or detailed content blocks.

#1A3E5C · #2E5C8A · #4C7DAE

Mystic Readability

Effective for main content areas where #4C7DAE can be body text and #7AA1CC provides a stronger highlight or heading.

#0B1D2C · #4C7DAE · #7AA1CC

CSS variables

:root {
  --ocean-current-abyss-1: #0B1D2C;
  --ocean-current-abyss-2: #1A3E5C;
  --ocean-current-abyss-3: #2E5C8A;
  --ocean-current-abyss-4: #4C7DAE;
  --ocean-current-abyss-5: #7AA1CC;
}

Tailwind config

theme: {
  extend: {
    colors: {
      "ocean-current-abyss": {
        1: "#0B1D2C",
        2: "#1A3E5C",
        3: "#2E5C8A",
        4: "#4C7DAE",
        5: "#7AA1CC",
      }
    }
  }
}

Related searches

deep blue color palettedark ocean thememysterious blue greycool dark UI colorsabyss color scheme

Palette colors

Hex values

Color 1#0B1D2C
·
Color 2#1A3E5C
·
Color 3#2E5C8A
·
Color 4#4C7DAE
·
Color 5#7AA1CC
·

Accessibility

Contrast checker

1
2
3
4
5
1
1.5:1Fail
2.5:1Fail
4:1AA18
6.4:1AA
2
1.5:1Fail
1.6:1Fail
2.6:1Fail
4.1:1AA18
3
2.5:1Fail
1.6:1Fail
1.6:1Fail
2.6:1Fail
4
4:1AA18
2.6:1Fail
1.6:1Fail
1.6:1Fail
5
6.4:1AA
4.1:1AA18
2.6:1Fail
1.6:1Fail

Similar palettes

More like Ocean Current Abyss

View all dark
Deep Sea Challenger
Abyssal Coral Bloom
Abyssal Coral Bloom
Abyssal Deep Current
Abyssal Midnight Reef
Abyssal Vent Minerals