Palette

Deep Ocean Trench

Dark, somber blues that plunge into lighter, mysterious depths, exploring the unseen of the ocean floor.

cooldark5 colors

More cool 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

#0F1F2B#1E3E4F#2D5D73#4282A8#5CB1E0

Palette guide

How to use Deep Ocean Trench

Overview

The Deep Ocean Trench palette (ID: deep-ocean-trench) provides a harmonious progression of blues, from the deep #0F1F2B to the clearer #5CB1E0. This collection is perfect for designers and developers aiming to evoke the serene yet mysterious depths of the ocean, transitioning towards lighter, more visible layers. With hex codes like #1E3E4F and #4282A8, it offers excellent versatility for creating visual depth, clear hierarchies, and tranquil interfaces. It's an ideal choice for projects that benefit from a cool, calming aesthetic while maintaining professionalism and strong readability.

Best used for

Environmental and marine conservation websites
Travel and tourism branding (ocean themes)
Educational content on natural sciences
Corporate branding with a calming feel
Serene digital interfaces and apps
Data visualization for aquatic themes

Suggested color roles

primary

Use #1E3E4F as a rich, deep blue for main content areas and significant UI components.

secondary

Apply #2D5D73 for supporting information, sub-sections, or inactive states, providing a clear mid-tone.

accent

Leverage #5CB1E0, the brightest blue, for calls to action, key highlights, or interactive elements, ensuring visibility.

background

Designate #0F1F2B as the deepest background color, creating a stable and profound base.

text

Employ white or a very light gray (e.g., #F0F0F0) for text on darker backgrounds. Darker blues like #0F1F2B can be used on #5CB1E0.

Accessibility notes

The lightest blue, #5CB1E0, provides good contrast for text or interactive elements against the darker blues.
Ensure sufficient contrast when using #4282A8 for text on #2D5D73 or #1E3E4F.
Consider using #5CB1E0 as a text color on #0F1F2B or #1E3E4F for excellent readability.
Avoid using two very similar dark blues for adjacent text and background without checking WCAG contrast ratios.

Recommended combinations

Oceanic Flow

For a deep background with a vibrant highlight and a harmonious mid-tone, mimicking ocean depth.

#0F1F2B · #5CB1E0 · #2D5D73

Clear Hierarchy

To create a clear progression and visual hierarchy in UI elements or content sections.

#1E3E4F · #2D5D73 · #4282A8

Tranquil Base

Ideal for a serene, professional interface with subtle distinctions between deep blue elements.

#0F1F2B · #1E3E4F · #2D5D73

CSS variables

:root {
  --deep-ocean-trench-1: #0F1F2B;
  --deep-ocean-trench-2: #1E3E4F;
  --deep-ocean-trench-3: #2D5D73;
  --deep-ocean-trench-4: #4282A8;
  --deep-ocean-trench-5: #5CB1E0;
}

Tailwind config

theme: {
  extend: {
    colors: {
      "deep-ocean-trench": {
        1: "#0F1F2B",
        2: "#1E3E4F",
        3: "#2D5D73",
        4: "#4282A8",
        5: "#5CB1E0",
      }
    }
  }
}

Hex values

Color 1#0F1F2B

Color 2#1E3E4F

Color 3#2D5D73

Color 4#4282A8

Color 5#5CB1E0

Accessibility

Contrast checker

1.5:1Fail

2.3:1Fail

4:1AA18

7:1AAA

1.5:1Fail

1.6:1Fail

2.7:1Fail

4.7:1AA

2.3:1Fail

1.6:1Fail

1.7:1Fail

3:1AA18

4:1AA18

2.7:1Fail

1.7:1Fail

1.8:1Fail

7:1AAA

4.7:1AA

3:1AA18

1.8:1Fail

Similar palettes

More like Deep Ocean Trench

View all cool

Oceanic Depths Mystery

Abyssal Bioluminescence