Back to palettes

Palette

Deep Sea Fathoms

Explores the mysterious and profound depths of the ocean, where light barely penetrates.

darkdark5 colors
More dark palettes

Preview

See it in context.

Interface

New

Ready when you are.

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

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

Data visualization

#0A1C29#132A3B#0E4760#0B6B8F#048C8F

Palette guide

How to use Deep Sea Fathoms

Overview

The Deep Sea Fathoms palette explores the mysterious and profound depths of the ocean, where light barely penetrates. It begins with the near-black #0A1C29 and progresses through increasingly vibrant, yet still deep, teal-blues: #132A3B, #0E4760, and #0B6B8F. The palette culminates in #048C8F, a striking, deep teal that evokes the subtle luminescence of deep-sea life. This collection is ideal for designers seeking a sophisticated, immersive, and slightly enigmatic aesthetic, perfect for conveying depth, knowledge, and a touch of the extraordinary.

Best used for

  • Documentary film titles
  • High-tech product interfaces
  • Abstract art installations
  • Dark mode application themes
  • Scientific data visualization
  • Marine conservation awareness

Suggested color roles

primary

#0A1C29 (The deepest, near-black blue, ideal for foundational backgrounds, establishing a profound and mysterious mood.)

secondary

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

accent

#048C8F (The brightest, most vibrant teal, perfect for calls to action, interactive elements, or highlighting key information.)

background

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

text

#048C8F (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

  • #048C8F provides strong contrast against #0A1C29, #132A3B, and #0E4760, 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 Currents

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

#0A1C29 · #132A3B · #0E4760

Luminescent Trail

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

#0A1C29 · #048C8F · #0B6B8F

Teal Gradient

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

#132A3B · #0E4760 · #0B6B8F

CSS variables

:root {
  --deep-sea-fathoms-1: #0A1C29;
  --deep-sea-fathoms-2: #132A3B;
  --deep-sea-fathoms-3: #0E4760;
  --deep-sea-fathoms-4: #0B6B8F;
  --deep-sea-fathoms-5: #048C8F;
}

Tailwind config

theme: {
  extend: {
    colors: {
      "deep-sea-fathoms": {
        1: "#0A1C29",
        2: "#132A3B",
        3: "#0E4760",
        4: "#0B6B8F",
        5: "#048C8F",
      }
    }
  }
}

Related searches

deep teal blue palettedark marine web designmysterious ocean depths colorshigh contrast dark uiscientific blue green scheme

Palette colors

Hex values

Color 1#0A1C29
·
Color 2#132A3B
·
Color 3#0E4760
·
Color 4#0B6B8F
·
Color 5#048C8F
·

Accessibility

Contrast checker

1
2
3
4
5
1
1.2:1Fail
1.7:1Fail
2.9:1Fail
4.3:1AA18
2
1.2:1Fail
1.5:1Fail
2.5:1Fail
3.6:1AA18
3
1.7:1Fail
1.5:1Fail
1.7:1Fail
2.5:1Fail
4
2.9:1Fail
2.5:1Fail
1.7:1Fail
1.5:1Fail
5
4.3:1AA18
3.6:1AA18
2.5:1Fail
1.5:1Fail

Similar palettes

More like Deep Sea Fathoms

View all dark