Back to palettes

Palette

Mariana Trench Echo

An exploration of deep ocean blues, reflecting the chilling, silent depths of the Mariana Trench.

darkdark5 colors
More dark palettes

Preview

See it in context.

Interface

New

Ready when you are.

A quick look at how Mariana Trench Echo 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 Mariana Trench Echo.

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

Data visualization

#CEDFED#8AACC2#4D7F9B#2D4C61#1F2D3D

Palette guide

How to use Mariana Trench Echo

Overview

The Mariana Trench Echo palette explores a captivating range of deep ocean blues, reflecting the chilling, silent depths of the abyss. From the ethereal light blue #CEDFED to the profound dark navy #1F2D3D, including mid-tones like #8AACC2, #4D7F9B, and #2D4C61, this palette evokes mystery, serenity, and sophistication. It's an excellent choice for designers and developers aiming to create immersive experiences, convey depth, or establish a calming yet intriguing mood, particularly in digital interfaces or branded content related to marine themes.

Best used for

  • Marine conservation and educational websites
  • Luxury spa and wellness branding
  • Sophisticated tech interfaces and dashboards
  • Mysterious game environments and concept art
  • Documentary visuals and film grading
  • Serene editorial layouts and publications

Suggested color roles

primary

Designate #1F2D3D as the primary color for backgrounds or main structural elements to establish depth and a strong foundation.

secondary

Use #4D7F9B for major content sections, headers, or interactive components, offering a balanced contrast.

accent

Apply #CEDFED for subtle highlights, interactive states, or delicate graphic elements to mimic light filtering through water.

background

Utilize #1F2D3D for a dark mode experience or #CEDFED for a very light, airy, and expansive feel.

text

For optimal readability on dark blues, use #CEDFED or pure white for text. On lighter backgrounds like #CEDFED, use #1F2D3D or black.

Accessibility notes

  • Ensure #CEDFED text on #1F2D3D background meets WCAG contrast standards for readability.
  • Avoid using #8AACC2 on #4D7F9B for small body text; reserve such pairings for larger headings or decorative elements.
  • Always check contrast ratios, especially when pairing mid-tone blues like #4D7F9B and #2D4C61 for text.
  • The lightest shade, #CEDFED, is excellent for highlights and readable text against the deeper blues.

Recommended combinations

Deep Abyss

Perfect for dark mode UI, atmospheric backgrounds, and conveying profound depth and mystery.

#1F2D3D · #2D4C61 · #CEDFED

Ocean Current

Ideal for layered content sections, subtle gradients, and dynamic visual storytelling.

#4D7F9B · #8AACC2 · #CEDFED

Subtle Glow

Effective for light accents on dark interfaces, interactive states, and highlighting key information.

#CEDFED · #1F2D3D · #4D7F9B

CSS variables

:root {
  --mariana-trench-echo-1: #CEDFED;
  --mariana-trench-echo-2: #8AACC2;
  --mariana-trench-echo-3: #4D7F9B;
  --mariana-trench-echo-4: #2D4C61;
  --mariana-trench-echo-5: #1F2D3D;
}

Tailwind config

theme: {
  extend: {
    colors: {
      "mariana-trench-echo": {
        1: "#CEDFED",
        2: "#8AACC2",
        3: "#4D7F9B",
        4: "#2D4C61",
        5: "#1F2D3D",
      }
    }
  }
}

Related searches

deep ocean color palettecool blue aestheticmysterious dark bluesmarine inspired designserene trench colors

Palette colors

Hex values

Color 1#CEDFED
·
Color 2#8AACC2
·
Color 3#4D7F9B
·
Color 4#2D4C61
·
Color 5#1F2D3D
·

Accessibility

Contrast checker

1
2
3
4
5
1
1.8:1Fail
3.2:1AA18
6.6:1AA
10.3:1AAA
2
1.8:1Fail
1.8:1Fail
3.8:1AA18
5.8:1AA
3
3.2:1AA18
1.8:1Fail
2.1:1Fail
3.2:1AA18
4
6.6:1AA
3.8:1AA18
2.1:1Fail
1.5:1Fail
5
10.3:1AAA
5.8:1AA
3.2:1AA18
1.5:1Fail

Similar palettes

More like Mariana Trench Echo

View all dark
Abyssal Trench Mystery
Deepwater Cave
Oceanic Trench Dive
Abyssal Coral Forms
Abyssal Trench Mystery
Bioluminescent Deep Trench