Palette

Abyssal Bloom Depths

This palette evokes the mysterious beauty of bioluminescent life in the deepest parts of the ocean.

darkcalm5 colors

More dark palettes

Preview

See it in context.

Interface

New

Ready when you are.

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

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

Data visualization

#0A0E1A#1C2E4A#4A6D8C#7B9CD1#E0E8F9

Palette guide

How to use Abyssal Bloom Depths

Overview

The Abyssal Bloom Depths palette gracefully descends into the serene, mysterious blues of the deep ocean. With a foundation of deep #0A0E1A and rich #1C2E4A, it offers a calming yet profound base. The palette progresses through muted #4A6D8C to the tranquil #7B9CD1, culminating in the ethereal #E0E8F9. Designers can harness this spectrum for projects demanding a sophisticated, calm, and slightly mysterious aesthetic, perfect for conveying depth and tranquility. Developers will find the gradual shift in luminance, especially with the bright #E0E8F9, excellent for creating clear visual hierarchies and readable content.

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 #1C2E4A for main content blocks and prominent visual elements, providing a solid, deep blue presence.

secondary

Apply #4A6D8C 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 #7B9CD1 to draw attention gently.

background

Set a deep, contemplative mood with #0A0E1A, creating an expansive and dark backdrop.

text

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

Accessibility notes

The lightest color, #E0E8F9, provides excellent contrast for text against all darker colors in the palette.
Avoid using #1C2E4A on #0A0E1A for small text due to insufficient contrast; reserve for large headings or graphical elements.
Ensure text using #4A6D8C or #7B9CD1 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 Tranquility

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

#0A0E1A · #1C2E4A · #E0E8F9

Bloom Gradient

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

#1C2E4A · #4A6D8C · #7B9CD1

Ethereal Depths

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

#0A0E1A · #7B9CD1 · #E0E8F9

CSS variables

:root {
  --abyssal-bloom-depths-1: #0A0E1A;
  --abyssal-bloom-depths-2: #1C2E4A;
  --abyssal-bloom-depths-3: #4A6D8C;
  --abyssal-bloom-depths-4: #7B9CD1;
  --abyssal-bloom-depths-5: #E0E8F9;
}

Tailwind config

theme: {
  extend: {
    colors: {
      "abyssal-bloom-depths": {
        1: "#0A0E1A",
        2: "#1C2E4A",
        3: "#4A6D8C",
        4: "#7B9CD1",
        5: "#E0E8F9",
      }
    }
  }
}

Hex values

Color 1#0A0E1A

Color 2#1C2E4A

Color 3#4A6D8C

Color 4#7B9CD1

Color 5#E0E8F9

Accessibility

Contrast checker

1.4:1Fail

3.5:1AA18

6.9:1AA

15.7:1AAA

1.4:1Fail

2.5:1Fail

4.9:1AA

11.1:1AAA

3.5:1AA18

2.5:1Fail

1.9:1Fail

4.4:1AA18

6.9:1AA

4.9:1AA

1.9:1Fail

2.3:1Fail

15.7:1AAA

11.1:1AAA

4.4:1AA18

2.3:1Fail

Similar palettes

More like Abyssal Bloom Depths

View all dark

Deep Sea Lullaby

Ocean Kelp Forest

Midnight Indigo Reverie

Moonless Lake Reflection

Starry Night Veil

Abyssal Midnight Reef