Palette

Abyssal Coral Forms

The eerie yet beautiful blues and greys of mysterious coral formations in the deepest ocean.

darkdark5 colors

More dark palettes

Preview

See it in context.

Interface

New

Ready when you are.

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

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

Data visualization

#0C1828#1E3048#365870#5A88A8#84B6CC

Palette guide

How to use Abyssal Coral Forms

Overview

The Abyssal Coral Forms palette reveals the eerie yet beautiful blues and greys of mysterious coral formations in the deepest ocean. Anchored by the profound #0C1828 and the rich #1E3048, it establishes a cool, sophisticated foundation. The palette transitions through the muted #365870 to the tranquil #5A88A8, culminating in the ethereal #84B6CC. Designers can harness this spectrum for projects demanding a sophisticated, calm, and slightly mysterious aesthetic, ideal for conveying depth and natural wonder. Developers will find the gradual shift in luminance, especially with the bright #84B6CC, excellent for creating clear visual hierarchies and readable content in dark-themed interfaces.

Best used for

Environmental organization websites
Science and research publications
High-end jewelry or art displays
Calm and introspective digital experiences
Architectural firm branding
Underwater photography showcases

Suggested color roles

primary

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

secondary

Apply #365870 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 #5A88A8 to draw attention gently.

background

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

text

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

Accessibility notes

The lightest color, #84B6CC, provides excellent contrast for text against all darker colors in the palette.
Avoid using #1E3048 on #0C1828 for small text due to insufficient contrast; reserve for large headings or graphical elements.
Ensure text using #365870 or #5A88A8 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

Coral Depths

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

#0C1828 · #1E3048 · #84B6CC

Form Gradient

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

#1E3048 · #365870 · #5A88A8

Abyss Bloom

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

#0C1828 · #5A88A8 · #84B6CC

CSS variables

:root {
  --abyssal-coral-forms-1: #0C1828;
  --abyssal-coral-forms-2: #1E3048;
  --abyssal-coral-forms-3: #365870;
  --abyssal-coral-forms-4: #5A88A8;
  --abyssal-coral-forms-5: #84B6CC;
}

Tailwind config

theme: {
  extend: {
    colors: {
      "abyssal-coral-forms": {
        1: "#0C1828",
        2: "#1E3048",
        3: "#365870",
        4: "#5A88A8",
        5: "#84B6CC",
      }
    }
  }
}

Hex values

Color 1#0C1828

Color 2#1E3048

Color 3#365870

Color 4#5A88A8

Color 5#84B6CC

Accessibility

Contrast checker

1.3:1Fail

2.4:1Fail

4.7:1AA

8.1:1AAA

1.3:1Fail

1.8:1Fail

3.5:1AA18

6.1:1AA

2.4:1Fail

1.8:1Fail

2:1Fail

3.4:1AA18