Back to palettes

Palette

Abyssal Current Flow

Explores the mysterious depths of the ocean, from dark abyssal blues to brighter teal currents.

CoolMinimal5 colors
More Cool palettes

Preview

See it in context.

Interface

New

Ready when you are.

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

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

Data visualization

#002B36#005F6B#00878A#00AFAF#00C6CA

Palette guide

How to use Abyssal Current Flow

Overview

The Abyssal Current Flow palette explores the mysterious depths of the ocean, transitioning from dark abyssal blues to brighter teal currents. Anchored by the profound #002B36 and flowing through the rich #005F6B and #00878A, it creates a sense of fluid movement and depth. The palette culminates in the vibrant #00AFAF and the luminous #00C6CA, mimicking light filtering through water. Designers can utilize this palette for projects requiring a fresh, yet deep, aquatic aesthetic. Developers will find the clear progression in luminance, especially with the bright #00C6CA, excellent for establishing strong visual hierarchies and intuitive user flows in interfaces and data visualizations.

Best used for

  • Marine and aquatic themed branding
  • Environmental conservation websites
  • Wellness and spa applications
  • Modern tech interfaces with a cool tone
  • Underwater photography showcases
  • Refreshing beverage packaging

Suggested color roles

primary

Use #005F6B as a dominant color for main content areas and prominent visual elements, providing a strong, dark teal presence.

secondary

Apply #00878A for secondary information, subheadings, or as a complementary background for sections, adding a vibrant mid-teal.

accent

Highlight interactive elements, calls to action, or key data points with the luminous #00AFAF to draw attention effectively.

background

Establish a deep, stable foundation with #002B36, ideal for dark themes or strong visual anchors.

text

For highlight text or very light accents, use #00C6CA. For primary text, a crisp white or light grey is recommended against the darker teals.

Accessibility notes

  • Ensure #00C6CA or white provides sufficient contrast for text against #002B36, #005F6B, and #00878A.
  • The contrast between adjacent shades like #005F6B and #002B36 might be too low for small text; use for larger elements.
  • When using #00AFAF for text, ensure its background is sufficiently dark (e.g., #002B36) for good readability.
  • Always test text legibility for all pairings, especially with the mid-tones to ensure accessibility compliance.

Recommended combinations

Teal Depths

Ideal for a deep background with primary content and a luminous, highly readable text or highlight.

#002B36 · #005F6B · #00C6CA

Flowing Current

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

#005F6B · #00878A · #00AFAF

Aqua Glow

Excellent for hero sections, combining a deep base with vibrant and luminous accents for dynamic visuals.

#002B36 · #00AFAF · #00C6CA

CSS variables

:root {
  --abyssal-current-flow-1: #002B36;
  --abyssal-current-flow-2: #005F6B;
  --abyssal-current-flow-3: #00878A;
  --abyssal-current-flow-4: #00AFAF;
  --abyssal-current-flow-5: #00C6CA;
}

Tailwind config

theme: {
  extend: {
    colors: {
      "abyssal-current-flow": {
        1: "#002B36",
        2: "#005F6B",
        3: "#00878A",
        4: "#00AFAF",
        5: "#00C6CA",
      }
    }
  }
}

Related searches

deep teal color paletteaquatic web design colorsocean current ui schememinimal teal brandinggradient blue green palette

Palette colors

Hex values

Color 1#002B36
·
Color 2#005F6B
·
Color 3#00878A
·
Color 4#00AFAF
·
Color 5#00C6CA
·

Accessibility

Contrast checker

1
2
3
4
5
1
2:1Fail
3.5:1AA18
5.5:1AA
7.1:1AAA
2
2:1Fail
1.7:1Fail
2.7:1Fail
3.5:1AA18
3
3.5:1AA18
1.7:1Fail
1.6:1Fail
2.1:1Fail
4
5.5:1AA
2.7:1Fail
1.6:1Fail
1.3:1Fail
5
7.1:1AAA
3.5:1AA18
2.1:1Fail
1.3:1Fail

Similar palettes

More like Abyssal Current Flow

View all Cool