Back to palettes

Palette

Abyssal Coral Bloom

Exploring the hidden beauty of the deep ocean, where mysterious life glows in the perpetual twilight.

darkdark5 colors
More dark palettes

Preview

See it in context.

Interface

New

Ready when you are.

A quick look at how Abyssal Coral Bloom 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 Coral Bloom.

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

Data visualization

#0A0A1F#1F3F5F#4A6E8A#6C91B4#A1C0D4

Palette guide

How to use Abyssal Coral Bloom

Overview

The Abyssal Coral Bloom palette explores the hidden beauty of the deep ocean, where mysterious life glows in perpetual twilight. Anchored by the profound #0A0A1F and the rich #1F3F5F, it offers a cool, dark foundation. The palette progresses through the muted #4A6E8A to the tranquil #6C91B4, culminating in the ethereal #A1C0D4. Designers can leverage this spectrum for projects requiring a sophisticated, mysterious, and calm aesthetic, ideal for conveying depth and subtle wonder. Developers will find the gradual shift in luminance, especially with the bright #A1C0D4, excellent for creating clear visual hierarchies and readable content in dark-themed interfaces.

Best used for

  • Luxury brand identity
  • Environmental awareness campaigns
  • Art and photography showcases
  • High-end tech product interfaces
  • Calm and reflective digital spaces
  • Mysterious narrative game environments

Suggested color roles

primary

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

secondary

Apply #4A6E8A 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 #6C91B4 to draw attention gently.

background

Set a deep, contemplative mood with #0A0A1F, creating an expansive and mysterious backdrop.

text

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

Accessibility notes

  • The lightest color, #A1C0D4, provides excellent contrast for text against all darker colors in the palette.
  • Avoid using #1F3F5F on #0A0A1F for small text due to insufficient contrast; reserve for large headings or graphical elements.
  • Ensure text using #4A6E8A or #6C91B4 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 Twilight

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

#0A0A1F · #1F3F5F · #A1C0D4

Subtle Glow

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

#1F3F5F · #4A6E8A · #6C91B4

Mystic Bloom

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

#0A0A1F · #6C91B4 · #A1C0D4

CSS variables

:root {
  --abyssal-coral-bloom-1: #0A0A1F;
  --abyssal-coral-bloom-2: #1F3F5F;
  --abyssal-coral-bloom-3: #4A6E8A;
  --abyssal-coral-bloom-4: #6C91B4;
  --abyssal-coral-bloom-5: #A1C0D4;
}

Tailwind config

theme: {
  extend: {
    colors: {
      "abyssal-coral-bloom": {
        1: "#0A0A1F",
        2: "#1F3F5F",
        3: "#4A6E8A",
        4: "#6C91B4",
        5: "#A1C0D4",
      }
    }
  }
}

Related searches

dark cool blue palettedeep ocean branding colorsmysterious aquatic schemetwilight blue web designsubtle luminous palette

Palette colors

Hex values

Color 1#0A0A1F
·
Color 2#1F3F5F
·
Color 3#4A6E8A
·
Color 4#6C91B4
·
Color 5#A1C0D4
·

Accessibility

Contrast checker

1
2
3
4
5
1
1.8:1Fail
3.6:1AA18
5.9:1AA
10.2:1AAA
2
1.8:1Fail
2:1Fail
3.3:1AA18
5.7:1AA
3
3.6:1AA18
2:1Fail
1.6:1Fail
2.8:1Fail
4
5.9:1AA
3.3:1AA18
1.6:1Fail
1.7:1Fail
5
10.2:1AAA
5.7:1AA
2.8:1Fail
1.7:1Fail

Similar palettes

More like Abyssal Coral Bloom

View all dark
Abyssal Coral Bloom
Pelagic Zone Mystery
Abyssal Bioluminescence
Abyssal Vent Minerals
Aquatic Deep Dive
Cobalt Abyss Dive