Back to palettes

Palette

Oceanic Trench Midnight

Explores the profound and chilling depths of the ocean floor, 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 Oceanic Trench Midnight 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 Oceanic Trench Midnight.

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

Data visualization

#0A1C2B#1C3D5A#2E5E8A#050E16#254F75

Palette guide

How to use Oceanic Trench Midnight

Overview

The Oceanic Trench Midnight palette plunges into the profound and chilling depths of the ocean, offering a sophisticated and mysterious aesthetic. Dominated by deep blues and near-blacks, it evokes a sense of calm and intrigue, perfect for designs requiring a serious yet elegant tone. Developers and designers will find this palette ideal for creating interfaces that exude depth and professionalism. The darkest shade, #050E16, provides a solid foundation, while hues like #0A1C2B and #2E5E8A introduce subtle gradients and visual interest. Its inherent coolness and rich saturation make it versatile for both digital and print applications, ensuring a cohesive and impactful visual experience. This palette is excellent for establishing a premium, understated presence.

Best used for

  • High-end technology brand interfaces
  • Dark mode application themes
  • Luxury product website designs
  • Immersive gaming environment visuals
  • Corporate or financial institution branding
  • Abstract art and photography portfolios

Suggested color roles

primary

Utilize #0A1C2B as the main brand color or dominant UI element, establishing a deep, authoritative presence.

secondary

Employ #1C3D5A for sub-headings, secondary navigation, or larger content blocks to add dimension without losing the dark aesthetic.

accent

Reserve #2E5E8A for interactive elements like buttons, links, or key highlights, providing a subtle yet noticeable pop against the darker shades.

background

Set #050E16 as the primary background color for a truly immersive dark mode, creating a strong foundation for all other elements.

text

For optimal readability, use a near-white text color like #F0F8FF or pure white against the dark backgrounds, ensuring sufficient contrast.

Accessibility notes

  • Ensure all text against #050E16 or #0A1C2B uses sufficiently light colors (e.g., #FFFFFF) to meet WCAG AA contrast standards.
  • Avoid using #1C3D5A or #254F75 for small text on the darkest backgrounds, as contrast may be insufficient for some users.
  • Provide clear visual indicators for interactive elements; the subtle differences between blues might not be enough for color-blind users.
  • Use larger font sizes for important information, especially when pairing mid-tone blues like #2E5E8A with darker backgrounds.

Recommended combinations

Deep Base, Subtle Highlight

Excellent for overall UI, where #050E16 is the background, #0A1C2B for cards/panels, and #2E5E8A for active states or primary text.

#050E16 · #0A1C2B · #2E5E8A

Rich Gradient Feel

Ideal for creating depth in hero sections or large banners, transitioning from darker to slightly lighter blues, evoking a deep-sea effect.

#0A1C2B · #1C3D5A · #254F75

Accentuated Focus

Use #050E16 as the canvas, #2E5E8A for prominent call-to-action buttons, and #1C3D5A for supporting text or secondary information.

#050E16 · #2E5E8A · #1C3D5A

CSS variables

:root {
  --oceanic-trench-midnight-1: #0A1C2B;
  --oceanic-trench-midnight-2: #1C3D5A;
  --oceanic-trench-midnight-3: #2E5E8A;
  --oceanic-trench-midnight-4: #050E16;
  --oceanic-trench-midnight-5: #254F75;
}

Tailwind config

theme: {
  extend: {
    colors: {
      "oceanic-trench-midnight": {
        1: "#0A1C2B",
        2: "#1C3D5A",
        3: "#2E5E8A",
        4: "#050E16",
        5: "#254F75",
      }
    }
  }
}

Related searches

deep blue color palettedark ocean colorsmysterious blue themenight mode ui colorselegant dark branding

Palette colors

Hex values

Color 1#0A1C2B
·
Color 2#1C3D5A
·
Color 3#2E5E8A
·
Color 4#050E16
·
Color 5#254F75
·

Accessibility

Contrast checker

1
2
3
4
5
1
1.5:1Fail
2.5:1Fail
1.1:1Fail
2:1Fail
2
1.5:1Fail
1.7:1Fail
1.7:1Fail
1.3:1Fail
3
2.5:1Fail
1.7:1Fail
2.9:1Fail
1.3:1Fail
4
1.1:1Fail
1.7:1Fail
2.9:1Fail
2.3:1Fail
5
2:1Fail
1.3:1Fail
1.3:1Fail
2.3:1Fail

Similar palettes

More like Oceanic Trench Midnight

View all dark
Abyss Gaze
Abyssal Bioluminescent Glow
Abyssal Coral Glow
Abyssal Depths
Abyssal Rift Shimmer
Abyssal Trench Dive