Back to palettes

Palette

Abyssal Coral Bloom

Explores the hidden depths of the ocean, where sunlight barely touches and strange flora thrives.

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

#0A1C2C#2E4756#5B7B7B#95ABA3#D4CDC6

Palette guide

How to use Abyssal Coral Bloom

Overview

The Abyssal Coral Bloom palette delves into the hidden depths of the ocean, where sunlight barely touches, revealing a sophisticated blend of muted blues, greens, and grays. From the profound #0A1C2C to the serene #5B7B7B and the earthy #95ABA3, this palette offers a unique, understated elegance. Designers can harness its cool, mysterious tones for projects that require a calm yet intriguing aesthetic, evoking natural textures and deep-sea tranquility. Developers will appreciate the subtle shifts in hue, especially with the light #D4CDC6, which allows for clear content separation while maintaining a cohesive, sophisticated look across interfaces.

Best used for

  • Eco-friendly product branding
  • Nature-inspired web designs
  • Art gallery websites
  • Luxury home decor concepts
  • Documentary film aesthetics
  • Calm and introspective apps

Suggested color roles

primary

Use #2E4756 as a dominant color for main content panels or primary navigation, offering a stable blue-grey.

secondary

Apply #5B7B7B for secondary information, subtle backgrounds, or graphical elements, adding a soothing teal-grey.

accent

Highlight key details or interactive elements with #95ABA3, providing a soft, natural accent that avoids harshness.

background

Set a deep, grounding mood with #0A1C2C, creating an expansive and mysterious backdrop.

text

For primary text, especially against darker hues, use #D4CDC6 to ensure excellent readability with a soft, natural feel.

Accessibility notes

  • Ensure #D4CDC6 provides excellent contrast for text against #0A1C2C, #2E4756, and #5B7B7B.
  • The contrast between #2E4756 and #0A1C2C is low for small text; use for larger headings or graphical elements.
  • When using #95ABA3 for text, ensure its background is sufficiently dark (e.g., #0A1C2C or #2E4756) for readability.
  • Always verify contrast ratios for all text and background pairings, particularly with mid-tone colors.

Recommended combinations

Deep Sea Flora

Ideal for a dark, foundational background with primary content and a light, readable text or highlight.

#0A1C2C · #2E4756 · #D4CDC6

Muted Depths

Creates a harmonious, muted gradient for layered UI elements, subtle charts, or soft background transitions.

#2E4756 · #5B7B7B · #95ABA3

Coral Whisper

Excellent for hero sections, combining a deep base with a natural accent and a soft, luminous text color.

#0A1C2C · #95ABA3 · #D4CDC6

CSS variables

:root {
  --abyssal-coral-bloom-2-1: #0A1C2C;
  --abyssal-coral-bloom-2-2: #2E4756;
  --abyssal-coral-bloom-2-3: #5B7B7B;
  --abyssal-coral-bloom-2-4: #95ABA3;
  --abyssal-coral-bloom-2-5: #D4CDC6;
}

Tailwind config

theme: {
  extend: {
    colors: {
      "abyssal-coral-bloom-2": {
        1: "#0A1C2C",
        2: "#2E4756",
        3: "#5B7B7B",
        4: "#95ABA3",
        5: "#D4CDC6",
      }
    }
  }
}

Related searches

muted ocean color schemedeep aquatic brandingcool grey blue palettenature inspired web designabyssal coral colors

Palette colors

Hex values

Color 1#0A1C2C
·
Color 2#2E4756
·
Color 3#5B7B7B
·
Color 4#95ABA3
·
Color 5#D4CDC6
·

Accessibility

Contrast checker

1
2
3
4
5
1
1.8:1Fail
3.8:1AA18
7.1:1AAA
11:1AAA
2
1.8:1Fail
2.1:1Fail
4:1AA18
6.2:1AA
3
3.8:1AA18
2.1:1Fail
1.9:1Fail
2.9:1Fail
4
7.1:1AAA
4:1AA18
1.9:1Fail
1.5:1Fail
5
11:1AAA
6.2:1AA
2.9:1Fail
1.5: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