Back to palettes

Palette

Deep Ocean Trench

Profound, dark blues evoking the crushing depths and unknown mysteries of the abyssal ocean trenches.

darkdark5 colors
More dark palettes

Preview

See it in context.

Interface

New

Ready when you are.

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

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

Data visualization

#0F2D44#1A4A6B#3A6C8C#0A1B29#2D5B7D

Palette guide

How to use Deep Ocean Trench

Overview

The Deep Ocean Trench palette (ID: deep-ocean-trench-7) offers a sophisticated array of muted, profound blues, perfectly capturing the crushing depths of the ocean. Featuring hex codes like #0F2D44, #1A4A6B, and #3A6C8C, this palette delivers an elegant and subdued aesthetic. Designers and developers can utilize these colors to create professional, high-end interfaces that convey security, stability, and understated luxury. The careful balance of dark tones with a slightly lighter accent ensures visual interest while maintaining a cohesive, refined mood, making it ideal for corporate or editorial projects.

Best used for

  • Luxury brand websites
  • Corporate reports and presentations
  • High-end web and app design
  • Architectural and interior design visualizations
  • Secure platform interfaces
  • Editorial and magazine layouts

Suggested color roles

primary

Use #1A4A6B as the main color for content blocks and larger UI elements, providing a sophisticated deep blue.

secondary

Apply #2D5B7D for supporting information, sub-headers, or dividing lines, offering a subtle shift in tone.

accent

Designate #3A6C8C as the accent color for subtle highlights, interactive elements, or states, being the lightest option.

background

Utilize #0A1B29 as the deepest background color, creating an elegant and profound foundation.

text

Employ white or a light gray (e.g., #E5E5E5) for all text on these dark backgrounds to ensure excellent readability.

Accessibility notes

  • Ensure sufficient contrast by using light text on all dark blues within this palette.
  • The contrast between #2D5B7D and #3A6C8C may be low for small text; use them carefully for adjacent elements.
  • Prioritize #3A6C8C for interactive elements against darker backgrounds to ensure visual distinction.
  • Avoid using too many similar dark blues for critical UI components that require clear differentiation.

Recommended combinations

Elegant Base

For a refined dark background with a subtle, yet visible, accent and primary content color.

#0A1B29 · #3A6C8C · #1A4A6B

Sophisticated Layers

To create a sense of depth and hierarchy in sections or cards with a harmonious blend of blues.

#0F2D44 · #2D5B7D · #3A6C8C

Muted Professional

Ideal for a professional, understated interface with deep, cohesive background and foreground elements.

#0A1B29 · #1A4A6B · #0F2D44

CSS variables

:root {
  --deep-ocean-trench-7-1: #0F2D44;
  --deep-ocean-trench-7-2: #1A4A6B;
  --deep-ocean-trench-7-3: #3A6C8C;
  --deep-ocean-trench-7-4: #0A1B29;
  --deep-ocean-trench-7-5: #2D5B7D;
}

Tailwind config

theme: {
  extend: {
    colors: {
      "deep-ocean-trench-7": {
        1: "#0F2D44",
        2: "#1A4A6B",
        3: "#3A6C8C",
        4: "#0A1B29",
        5: "#2D5B7D",
      }
    }
  }
}

Related searches

sophisticated blue palettemuted deep blueselegant dark blue schemecorporate web colorsserene blue design

Palette colors

Hex values

Color 1#0F2D44
·
Color 2#1A4A6B
·
Color 3#3A6C8C
·
Color 4#0A1B29
·
Color 5#2D5B7D
·

Accessibility

Contrast checker

1
2
3
4
5
1
1.5:1Fail
2.5:1Fail
1.2:1Fail
2:1Fail
2
1.5:1Fail
1.7:1Fail
1.9:1Fail
1.3:1Fail
3
2.5:1Fail
1.7:1Fail
3.1:1AA18
1.3:1Fail
4
1.2:1Fail
1.9:1Fail
3.1:1AA18
2.4:1Fail
5
2:1Fail
1.3:1Fail
1.3:1Fail
2.4:1Fail

Similar palettes

More like Deep Ocean Trench

View all dark
Abyssal Midnight Reef
Deep Abyss Current
Deep Cobalt Plunge
Deep Ocean Abyss
Deep Ocean Twilight
Deep Ocean Voyage