Palette

Abyssal Current Glide

Dive into the serene, mysterious depths of the ocean where light fades into enigmatic blues and teals.

coolcalm5 colors

More cool palettes

Preview

See it in context.

Interface

New

Ready when you are.

A quick look at how Abyssal Current Glide 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 Abyssal Current Glide.

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

Data visualization

#000F21#002B47#0A5D80#3C8DA6#6CBCCF

Palette guide

How to use Abyssal Current Glide

Overview

Dive into the serene, mysterious depths of the Abyssal Current Glide palette, where light fades into enigmatic blues and teals. Anchored by the profound #000F21 and flowing through the rich #002B47 and #0A5D80, it cultivates an atmosphere of calm depth. The palette culminates in the tranquil #3C8DA6 and the ethereal #6CBCCF, mimicking diffused light in deep water. Designers can harness this spectrum for projects demanding a sophisticated, calm, and slightly mysterious aesthetic. Developers will find the gradual shift in luminance, especially with the bright #6CBCCF, excellent for creating clear visual hierarchies and readable content in dark-themed interfaces.

Best used for

Serene wellness and meditation apps
Luxury spa or retreat branding
Documentary film titles or graphics
Elegant personal portfolios
Website designs for environmental organizations
Sophisticated art and photography displays

Suggested color roles

primary

Use #002B47 for main content blocks and prominent visual elements, providing a solid, deep blue presence.

secondary

Apply #0A5D80 for secondary navigation, subheadings, or as a softer background for content sections, adding visual interest.

accent

Highlight interactive elements, calls to action, or key information with the tranquil #3C8DA6 to draw attention gently.

background

Set a deep, contemplative mood with #000F21, creating an expansive and mysterious backdrop.

text

For primary text, especially against darker hues, use #6CBCCF to ensure excellent readability and a soft, luminous effect.

Accessibility notes

The lightest color, #6CBCCF, provides excellent contrast for text against all darker colors in the palette.
Avoid using #002B47 on #000F21 for small text due to insufficient contrast; reserve for large headings or graphical elements.
Ensure text using #0A5D80 or #3C8DA6 has adequate contrast, particularly on lighter backgrounds if used differently.
Always check contrast ratios for any text and background pairings, especially with the mid-tones.

Recommended combinations

Deep Glide

Ideal for foundational elements with primary content and a luminous, highly readable text or highlight.

#000F21 · #002B47 · #6CBCCF

Current Flow

Creates a harmonious blue-teal gradient, perfect for layered UI components, charts, or subtle background animations.

#002B47 · #0A5D80 · #3C8DA6

Aqua Veil

Excellent for hero sections that need a dark, mysterious base with soft, glowing accents and clear text.

#000F21 · #3C8DA6 · #6CBCCF

CSS variables

:root {
  --abyssal-current-glide-2-1: #000F21;
  --abyssal-current-glide-2-2: #002B47;
  --abyssal-current-glide-2-3: #0A5D80;
  --abyssal-current-glide-2-4: #3C8DA6;
  --abyssal-current-glide-2-5: #6CBCCF;
}

Tailwind config

theme: {
  extend: {
    colors: {
      "abyssal-current-glide-2": {
        1: "#000F21",
        2: "#002B47",
        3: "#0A5D80",
        4: "#3C8DA6",
        5: "#6CBCCF",
      }
    }
  }
}

Hex values

Color 1#000F21

Color 2#002B47

Color 3#0A5D80

Color 4#3C8DA6

Color 5#6CBCCF

Accessibility

Contrast checker

1.3:1Fail

2.7:1Fail

5.1:1AA

8.9:1AAA

1.3:1Fail

2:1Fail

3.9:1AA18

6.8:1AA

2.7:1Fail

2:1Fail

1.9:1Fail

3.4:1AA18

5.1:1AA

3.9:1AA18

1.9:1Fail

1.8:1Fail

8.9:1AAA

6.8:1AA

3.4:1AA18

1.8:1Fail

Similar palettes

More like Abyssal Current Glide