Back to palettes

Palette

Midnight Ocean Trench

Plunge into the mysterious depths of the midnight ocean with this dark, cool palette of deep blues and teals.

cooldark5 colors
More cool palettes

Preview

See it in context.

Interface

New

Ready when you are.

A quick look at how Midnight Ocean Trench 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 Midnight Ocean Trench.

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

Data visualization

#00000A#0A253A#1F4050#2D5C6F#4F707F

Palette guide

How to use Midnight Ocean Trench

Overview

The Midnight Ocean Trench palette delves into the most profound and mysterious depths, offering a collection of extremely dark blues and muted teals. With colors ranging from the near-black #00000A to the cool, deep #1F4050 and the subtly lighter #4F707F, this palette provides a sophisticated, minimalist foundation for designers and developers. It's perfectly suited for projects aiming for a high-end, exclusive, or scientific aesthetic. The subtle variations between #0A253A and #2D5C6F allow for textured dark mode experiences without sacrificing elegance, creating an atmosphere of quiet intensity and profound discovery.

Best used for

  • High-end minimalist websites and portfolios
  • Scientific data visualization platforms
  • Luxury product packaging and branding
  • Sophisticated dark mode UI/UX designs
  • Architectural renderings and presentations
  • Documentaries or films with deep sea themes

Suggested color roles

primary

Use #00000A as the foundational, almost absolute dark background for a truly abyssal feel.

secondary

Employ #0A253A and #1F4050 for secondary backgrounds, panels, or large content blocks to create subtle layering.

accent

Apply #4F707F for muted, sophisticated accents in iconography, small highlights, or subtle calls to action.

background

Choose #0A253A as a primary background for a dark, cool, and immersive user interface.

text

Pair a light gray or white text with the darker shades, or use #4F707F for headings and larger text elements for elegance.

Accessibility notes

  • Extreme care is needed to ensure text on #00000A and #0A253A has sufficient contrast; use very light text.
  • Differentiate interactive elements clearly, as the palette's subtle shifts can be hard to perceive.
  • Avoid using small font sizes for any text on the darker colors to prevent readability issues.
  • Consider using thicker font weights for primary text to enhance legibility against the deep backgrounds.

Recommended combinations

Abyssal Depths

For layered dark backgrounds that convey profound depth and subtle variations.

#00000A · #0A253A · #1F4050

Trench Ascent

Creates a visual journey from dark to light, ideal for progress indicators or subtle gradients.

#0A253A · #2D5C6F · #4F707F

Subtle Contrast

An elegant combination for main content areas, with #4F707F providing a gentle highlight.

#00000A · #4F707F · #1F4050

CSS variables

:root {
  --midnight-ocean-trench-1: #00000A;
  --midnight-ocean-trench-2: #0A253A;
  --midnight-ocean-trench-3: #1F4050;
  --midnight-ocean-trench-4: #2D5C6F;
  --midnight-ocean-trench-5: #4F707F;
}

Tailwind config

theme: {
  extend: {
    colors: {
      "midnight-ocean-trench": {
        1: "#00000A",
        2: "#0A253A",
        3: "#1F4050",
        4: "#2D5C6F",
        5: "#4F707F",
      }
    }
  }
}

Related searches

deep cool palettedark teal colorsocean trench aestheticminimalist dark themesophisticated blue grey

Palette colors

Hex values

Color 1#00000A
·
Color 2#0A253A
·
Color 3#1F4050
·
Color 4#2D5C6F
·
Color 5#4F707F
·

Accessibility

Contrast checker

1
2
3
4
5
1
1.3:1Fail
1.9:1Fail
2.9:1Fail
3.9:1AA18
2
1.3:1Fail
1.4:1Fail
2.1:1Fail
3:1Fail
3
1.9:1Fail
1.4:1Fail
1.5:1Fail
2.1:1Fail
4
2.9:1Fail
2.1:1Fail
1.5:1Fail
1.4:1Fail
5
3.9:1AA18
3:1Fail
2.1:1Fail
1.4:1Fail

Similar palettes

More like Midnight Ocean Trench

View all cool
Bioluminescent Abyss
Abyssal Current Glide
Cobalt Abyss Depths
Abyssal Bioluminescence
Cobalt Arctic Depth
Deep Ocean Bloom