Back to palettes

Palette

Deep Ocean Trench

A profound descent into the deepest blues, capturing the chilling mystery of the ocean's abyssal trench.

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

#000080#0000CD#191970#0F2D5D#1C4680

Palette guide

How to use Deep Ocean Trench

Overview

The Deep Ocean Trench palette (ID: deep-ocean-trench-4) features a compelling collection of strong, classic deep blues, including #000080, #0000CD, and #191970. These shades evoke a sense of tradition, authority, and the profound mystery of the abyssal ocean. This palette is ideal for designers and developers seeking to convey stability and trustworthiness in their projects. The vibrant yet dark tones allow for powerful branding and clear visual hierarchy, making it suitable for applications that demand a serious and established aesthetic. It’s a timeless choice for impactful design.

Best used for

  • Tech company branding
  • Governmental and institutional websites
  • Maritime and nautical themes
  • Educational platforms
  • Software interfaces and dashboards
  • Classic corporate identity

Suggested color roles

primary

Use #0000CD as the dominant color for key elements and calls to action, offering a vibrant, strong presence.

secondary

Apply #1C4680 for supporting information, sub-sections, or less prominent features, maintaining depth.

accent

Designate #000080 for subtle highlights, borders, or hover states, providing a rich, deep contrast.

background

Utilize #191970 as the primary background color for a consistent, deep, and authoritative canvas.

text

Employ white or a very light gray (e.g., #F0F0F0) for all text on these dark backgrounds to ensure optimal legibility.

Accessibility notes

  • Always ensure high contrast with light text on these dark blue backgrounds to meet WCAG standards.
  • The blues within this palette are quite close in value; avoid using them for critical distinctions without sufficient contrast.
  • Test text readability on #0000CD if not using pure white, as its vibrancy can impact some lighter grays.
  • Consider larger font sizes or bolding for important text elements to enhance visibility.

Recommended combinations

Strong Brand

For a powerful brand statement with a deep background, a vibrant primary, and a supportive dark accent.

#191970 · #0000CD · #0F2D5D

Classic Interface

Ideal for a traditional, authoritative interface where elements are clearly defined yet cohesive.

#000080 · #1C4680 · #0000CD

Deep Harmony

To create a harmonious and serious aesthetic with closely related deep blue tones for layered elements.

#000080 · #191970 · #0F2D5D

CSS variables

:root {
  --deep-ocean-trench-4-1: #000080;
  --deep-ocean-trench-4-2: #0000CD;
  --deep-ocean-trench-4-3: #191970;
  --deep-ocean-trench-4-4: #0F2D5D;
  --deep-ocean-trench-4-5: #1C4680;
}

Tailwind config

theme: {
  extend: {
    colors: {
      "deep-ocean-trench-4": {
        1: "#000080",
        2: "#0000CD",
        3: "#191970",
        4: "#0F2D5D",
        5: "#1C4680",
      }
    }
  }
}

Related searches

classic deep blue colorsnavy blue palettevibrant dark blue schemeinstitutional blue brandingtech company colors

Palette colors

Hex values

Color 1#000080
·
Color 2#0000CD
·
Color 3#191970
·
Color 4#0F2D5D
·
Color 5#1C4680
·

Accessibility

Contrast checker

1
2
3
4
5
1
1.4:1Fail
1.1:1Fail
1.2:1Fail
1.7:1Fail
2
1.4:1Fail
1.3:1Fail
1.2:1Fail
1.2:1Fail
3
1.1:1Fail
1.3:1Fail
1.1:1Fail
1.6:1Fail
4
1.2:1Fail
1.2:1Fail
1.1:1Fail
1.4:1Fail
5
1.7:1Fail
1.2:1Fail
1.6:1Fail
1.4:1Fail

Similar palettes

More like Deep Ocean Trench

View all dark