Palette

Pelagic Zone Mystery

Explores the elusive beauty of the deep ocean, where light fades into enigmatic blues and greens, a profound mystery.

darkdark5 colors

More dark palettes

Preview

See it in context.

Interface

New

Ready when you are.

A quick look at how Pelagic Zone Mystery 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 Pelagic Zone Mystery.

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

Data visualization

#0F2C46#004D40#48D1CC#1A1A1A#AFEEEE

Palette guide

How to use Pelagic Zone Mystery

Overview

The Pelagic Zone Mystery palette plunges into the enigmatic depths of the ocean, offering a captivating blend of deep blues, rich greens, and vibrant aquamarine accents. With dominant shades like `#0F2C46` (Dark Midnight Blue) and the striking `#004D40` (Dark Green), this palette is ideal for designers and developers crafting immersive, mysterious, or high-tech digital experiences. The luminous `#48D1CC` (MediumTurquoise) and `#AFEEEE` (PaleTurquoise) provide crucial contrast and a sense of otherworldly glow, perfect for highlights and interactive elements. This collection is powerful for conveying depth, sophistication, and a touch of the unknown.

Best used for

Dark mode UI themes
Gaming interfaces and branding
Luxury tech or environmental brands
Sci-fi or fantasy art and design
Deep sea exploration documentaries or websites
Interactive data visualizations

Suggested color roles

primary

Utilize `#0F2C46` as the dominant background or for large sections, creating an immersive, deep feel.

secondary

Employ `#004D40` for secondary content areas, panels, or dividers to add subtle variation within the darkness.

accent

Use `#48D1CC` or `#AFEEEE` sparingly for interactive elements, icons, or key calls-to-action to provide a vibrant, mysterious glow.

background

Apply `#1A1A1A` as the deepest background layer, providing maximum contrast for lighter elements.

text

For optimal readability, use `#AFEEEE` or bright white for text, especially on darker backgrounds like `#0F2C46` or `#1A1A1A`.

Accessibility notes

Ensure sufficient contrast when pairing light text like `#AFEEEE` with dark backgrounds such as `#0F2C46` or `#1A1A1A`.
Avoid using `#004D40` or `#0F2C46` for text on `#1A1A1A` backgrounds, as contrast will be too low.
Use the vibrant accents like `#48D1CC` for interactive elements that need to be highly visible.
Consider larger font sizes for any text set in darker palette colors on similarly dark backgrounds.

Recommended combinations

Deep Abyss

Creates a layered, dark background with subtle shifts, perfect for immersive interfaces.

#1A1A1A · #0F2C46 · #004D40

Aqua Glow

Ideal for highlighting key information or interactive elements against a deep, mysterious base.

#48D1CC · #AFEEEE · #0F2C46

Subtle Shimmer

Use for sections that require a darker base with a soft, ethereal outline or textual emphasis.

#004D40 · #0F2C46 · #AFEEEE

CSS variables

:root {
  --pelagic-zone-mystery-1: #0F2C46;
  --pelagic-zone-mystery-2: #004D40;
  --pelagic-zone-mystery-3: #48D1CC;
  --pelagic-zone-mystery-4: #1A1A1A;
  --pelagic-zone-mystery-5: #AFEEEE;
}

Tailwind config

theme: {
  extend: {
    colors: {
      "pelagic-zone-mystery": {
        1: "#0F2C46",
        2: "#004D40",
        3: "#48D1CC",
        4: "#1A1A1A",
        5: "#AFEEEE",
      }
    }
  }
}

Hex values

Color 1#0F2C46

Color 2#004D40

Color 3#48D1CC

Color 4#1A1A1A

Color 5#AFEEEE

Accessibility

Contrast checker

1.5:1Fail

7.7:1AAA

1.2:1Fail

11.1:1AAA

1.5:1Fail

5.3:1AA

1.8:1Fail

7.6:1AAA

7.7:1AAA

5.3:1AA

9.3:1AAA

1.4:1Fail