Palette

Deep Sea Fathom

Explores the profound depths of the ocean, where sunlight barely penetrates, revealing hidden mysteries.

darkdark5 colors

More dark palettes

Preview

See it in context.

Interface

New

Ready when you are.

A quick look at how Deep Sea Fathom 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 Deep Sea Fathom.

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

Data visualization

#050F1A#1A3B4C#3C6D8D#6AAEC9#0D222E

Palette guide

How to use Deep Sea Fathom

Overview

The Deep Sea Fathom palette explores the profound depths of the ocean, where sunlight barely penetrates, revealing hidden mysteries. It progresses from the near-black #050F1A to the deep, sophisticated #1A3B4C and the rich #3C6D8D. A vibrant, yet muted, aqua #6AAEC9 provides a striking contrast, evoking moments of clarity or distant light. The very dark #0D222E adds another layer of profound depth, almost indistinguishable from the darkest primary. This palette is ideal for projects requiring a serious, mysterious, and deeply immersive aesthetic, perfect for conveying knowledge and the allure of the unknown.

Best used for

Scientific research journals
Mystery novel covers
High-end documentary interfaces
Dark mode application themes
Abstract corporate branding
Atmospheric video game art

Suggested color roles

primary

#050F1A (The deepest, almost black-blue, ideal for foundational backgrounds, establishing a profound and mysterious mood.)

secondary

#1A3B4C (A rich, deep blue for secondary content areas, navigation, or subtle layering.)

accent

#6AAEC9 (The brightest, most vibrant aqua, perfect for calls to action, interactive elements, or highlighting key information.)

background

#050F1A (Provides an immersive, truly dark ocean backdrop, enhancing the vibrancy of other colors.)

text

#6AAEC9 (Excellent for headings and important text on dark backgrounds. For body text, a light grey or white (e.g., #F0F0F0) is recommended for optimal readability.)

Accessibility notes

#6AAEC9 provides strong contrast against #050F1A, #1A3B4C, and #0D222E, making it suitable for text and interactive elements.
Always use a light, high-contrast color (e.g., white or light grey) for body text on the darkest backgrounds to ensure WCAG compliance.
Avoid using the darker blues for text on similar dark blue backgrounds to prevent readability issues.
The palette's depth benefits from careful placement of the accent color for critical information.

Recommended combinations

Deepest Abyss

Layered darkest tones for ultimate depth and a sense of the unknown.

#050F1A · #0D222E · #1A3B4C

Glimmering Depths

Strong contrast for highlighting key information or interactive elements, mimicking distant light.

#050F1A · #6AAEC9 · #3C6D8D

Subtle Mysteries

Variations of deep blue for secondary UI components or subtle gradients.

#1A3B4C · #3C6D8D · #0D222E

CSS variables

:root {
  --deep-sea-fathom-1: #050F1A;
  --deep-sea-fathom-2: #1A3B4C;
  --deep-sea-fathom-3: #3C6D8D;
  --deep-sea-fathom-4: #6AAEC9;
  --deep-sea-fathom-5: #0D222E;
}

Tailwind config

theme: {
  extend: {
    colors: {
      "deep-sea-fathom": {
        1: "#050F1A",
        2: "#1A3B4C",
        3: "#3C6D8D",
        4: "#6AAEC9",
        5: "#0D222E",
      }
    }
  }
}

Hex values

Color 1#050F1A

Color 2#1A3B4C

Color 3#3C6D8D

Color 4#6AAEC9

Color 5#0D222E

Accessibility

Contrast checker

1.6:1Fail

3.5:1AA18

7.8:1AAA

1.2:1Fail

1.6:1Fail

2.1:1Fail

4.8:1AA

1.4:1Fail

3.5:1AA18

2.1:1Fail

2.3:1Fail

2.9:1Fail

7.8:1AAA

4.8:1AA

2.3:1Fail

6.6:1AA

1.2:1Fail

1.4:1Fail

2.9:1Fail

6.6:1AA

Similar palettes

More like Deep Sea Fathom

View all dark

Abyssal Midnight Reef