Back to palettes

Palette

Oceanic Deep Trench

A profound gradient of oceanic blues, capturing the silent mystery of the deep trench.

darkdark5 colors
More dark palettes

Preview

See it in context.

Interface

New

Ready when you are.

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

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

Data visualization

#000033#000066#000099#0000CC#0000FF

Palette guide

How to use Oceanic Deep Trench

Overview

The Oceanic Deep Trench palette plunges into the profound darkness of the ocean's abyss, offering a stark yet elegant gradient of deep blues. Starting with the almost black #000033, it transitions through intense shades like #000066 and #000099, culminating in the vibrant, deep #0000CC and electric #0000FF. This collection is ideal for designers and developers creating interfaces that demand gravitas, mystery, and a touch of dramatic elegance. Its powerful contrast capabilities make it superb for conveying depth and focus. This palette excels in applications requiring a serious, immersive, or high-tech feel, drawing users into a world of profound blue. It's a journey into the silent, majestic mystery of the deep trench.

Best used for

  • Cybersecurity dashboards
  • Science fiction game interfaces
  • High-end technology branding
  • Luxury automotive websites
  • Documentary film titles
  • Dark mode UI designs

Suggested color roles

primary

Utilize #000066 for core structural elements, providing a solid and deep foundation.

secondary

Apply #000099 to secondary content areas or as a background for interactive components, adding depth.

accent

Employ #0000FF (Blue) for vibrant calls to action, alerts, or key interactive elements to provide a strong visual pop.

background

Use #000033 as the main background color to create a dark, immersive, and mysterious environment.

text

For maximum readability, use white or a very light gray like #F0F0F0 for all text against these deep blue backgrounds.

Accessibility notes

  • Always pair these dark blues with white or very light text to ensure adequate contrast for readability.
  • Avoid using any of the darker blues for text on other dark blues; contrast will be insufficient.
  • Ensure interactive elements have clear visual states (hover, active) beyond color, as shades can be subtle.
  • The vibrant #0000FF should be carefully tested for contrast, especially when used for small text on slightly lighter blues.

Recommended combinations

Abyss Gradient

Ideal for background gradients, creating a sense of descending into deep water.

#000033 · #000066 · #000099

Electric Depth

Excellent for highlighting key data, interactive buttons, or electrifying visual effects.

#0000CC · #0000FF · #000066

Mystic Blend

Creates a powerful contrast for hero sections or prominent visual statements.

#000033 · #000099 · #0000FF

CSS variables

:root {
  --oceanic-deep-trench-1: #000033;
  --oceanic-deep-trench-2: #000066;
  --oceanic-deep-trench-3: #000099;
  --oceanic-deep-trench-4: #0000CC;
  --oceanic-deep-trench-5: #0000FF;
}

Tailwind config

theme: {
  extend: {
    colors: {
      "oceanic-deep-trench": {
        1: "#000033",
        2: "#000066",
        3: "#000099",
        4: "#0000CC",
        5: "#0000FF",
      }
    }
  }
}

Related searches

deep blue gradientsnavy color schemesdark mode blue palettemysterious ocean colorshigh-tech blue UI

Palette colors

Hex values

Color 1#000033
·
Color 2#000066
·
Color 3#000099
·
Color 4#0000CC
·
Color 5#0000FF
·

Accessibility

Contrast checker

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

Similar palettes

More like Oceanic Deep Trench

View all dark