Palette

Coral Abyss Dive

Plunge into the cool, silent depths of the ocean, where hidden corals hint at hidden wonders.

coolcalm5 colors

More cool palettes

Preview

See it in context.

Interface

New

Ready when you are.

A quick look at how Coral Abyss Dive 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 Coral Abyss Dive.

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

Data visualization

#0A2E3D#2D6B7F#6CA3B8#B0D7EB#051A23

Palette guide

How to use Coral Abyss Dive

Overview

The Coral Abyss Dive palette plunges into the cool, silent depths of the ocean, where hidden corals hint at hidden wonders. Featuring deep #0A2E3D (Dark Teal) and #051A23 (Midnight Blue), this collection provides designers with a mysterious and calming range. The brighter #2D6B7F, #6CA3B8, and #B0D7EB offer a gradual ascent, mimicking light filtering through water, ensuring versatility. Developers can leverage these hues to create user interfaces that feel serene, sophisticated, and immersive, perfect for marine conservation, luxury travel, or tech brands. This palette is exceptionally versatile, blending deep tranquility with subtle luminosity, ideal for projects seeking a modern and calming aesthetic.

Best used for

marine conservation website
luxury spa branding
deep sea exploration game UI
tech company app design
minimalist interior design
meditation and wellness apps

Suggested color roles

primary

#0A2E3D (Dark Teal) provides a strong, mysterious, and calming base, ideal for main headers, navigation, or deep background sections.

secondary

#2D6B7F (Ocean Blue) offers a rich, cool complement, suitable for subheadings, secondary content blocks, or elegant branding elements.

accent

#B0D7EB (Sky Blue) acts as a luminous highlight. Perfect for delicate UI elements, icons, or to subtly draw attention to key information.

background

#6CA3B8 (Misty Blue) offers a versatile, mid-tone background that supports content with a subtle coolness and depth.

text

#B0D7EB (Sky Blue) offers excellent readability against darker colors like #0A2E3D or #051A23. For lighter backgrounds, use black or #051A23.

Accessibility notes

Ensure #B0D7EB text has high contrast against #0A2E3D or #051A23 for optimal readability, meeting WCAG AA standards.
Avoid using #2D6B7F and #6CA3B8 for text and background combinations due to their similar luminosity.
When using #B0D7EB for text, pair it with a significantly dark background to ensure legibility, especially for small text.
Check contrast ratios for all interactive elements, ensuring they are clearly distinguishable against adjacent colors.

Recommended combinations

Deep Ocean

Creates a robust, mysterious, and calming brand identity, excellent for logos and primary web sections.

#0A2E3D · #051A23 · #2D6B7F

Light Filter

Ideal for soft, ethereal backgrounds or subtle decorative elements, evoking lightness and tranquility.

#2D6B7F · #6CA3B8 · #B0D7EB

Abyss Contrast

Effective for strong headlines or calls-to-action against a light background, providing clear hierarchy and depth.

#051A23 · #B0D7EB · #0A2E3D

CSS variables

:root {
  --coral-abyss-dive-1: #0A2E3D;
  --coral-abyss-dive-2: #2D6B7F;
  --coral-abyss-dive-3: #6CA3B8;
  --coral-abyss-dive-4: #B0D7EB;
  --coral-abyss-dive-5: #051A23;
}

Tailwind config

theme: {
  extend: {
    colors: {
      "coral-abyss-dive": {
        1: "#0A2E3D",
        2: "#2D6B7F",
        3: "#6CA3B8",
        4: "#B0D7EB",
        5: "#051A23",
      }
    }
  }
}

Hex values

Color 1#0A2E3D

Color 2#2D6B7F

Color 3#6CA3B8

Color 4#B0D7EB

Color 5#051A23

Accessibility

Contrast checker

2.4:1Fail

5.1:1AA

9.4:1AAA

1.2:1Fail

2.4:1Fail

2.1:1Fail

3.9:1AA18

3:1Fail

5.1:1AA

2.1:1Fail

1.8:1Fail

6.4:1AA

9.4:1AAA

3.9:1AA18

1.8:1Fail

11.7:1AAA

1.2:1Fail

3:1Fail

6.4:1AA

11.7:1AAA

Similar palettes

More like Coral Abyss Dive

View all cool

Deep Ocean Current

Oceanic Abyss Deep

Oceanic Sapphire Depths

Sapphire Grotto Shimmer

Abyssal Blue Descent

Abyssal Current Glide