Palette

Oceanic Trench Bloom

Mysterious deep blues and purples evoking the strange and beautiful life found in the abyssal oceanic trenches.

DarkDark5 colors

More Dark palettes

Preview

See it in context.

Interface

New

Ready when you are.

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

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

Data visualization

#000080#0000CD#00BFFF#6A5ACD#8A2BE2

Palette guide

How to use Oceanic Trench Bloom

Overview

The Oceanic Trench Bloom palette plunges into the mysterious depths of the ocean, offering a captivating blend of deep blues and vibrant purples. Anchored by the profound navy of #000080 and the rich royal blue of #0000CD, it evokes the abyssal trenches. A striking electric blue, #00BFFF, introduces a luminous contrast, mimicking bioluminescence. Complementary purples like the muted slate blue of #6A5ACD and the vibrant blue-violet of #8A2BE2 complete this unique scheme. Ideal for projects seeking a sophisticated yet intriguing aesthetic, this palette is perfect for digital interfaces, branding, and creative designs that aim to convey depth, wonder, and a touch of the extraordinary.

Best used for

Deep sea-themed websites and applications
Sci-fi or fantasy game interfaces
Luxury or high-tech brand identity
Night mode UI/UX designs
Artistic digital illustrations and abstract art
Event branding for exclusive or mysterious themes

Suggested color roles

primary

#000080 - Use this deep navy as the foundational color for large sections, headers, or primary branding. It sets a serious, profound tone.

secondary

#0000CD - A rich royal blue, perfect for subheadings, active states, or secondary graphical elements, providing a slightly lighter, yet still deep, complement to the primary.

accent

#00BFFF - This electric blue is excellent for calls-to-action, interactive elements, or key highlights, offering a bright, luminous pop against the darker shades.

background

#000080 - An immersive, dark background for interfaces, creating a sense of depth and allowing lighter text and elements to stand out dramatically.

text

For optimal readability against the dark blues, use pure white or a very light off-white text color such as #F0F8FF.

Accessibility notes

Ensure sufficient contrast when pairing lighter palette colors like #00BFFF with the darker #000080 or #0000CD for text or essential UI elements.
Avoid placing #6A5ACD or #8A2BE2 as text colors directly on dark backgrounds like #000080 without checking WCAG AA or AAA contrast ratios.
For maximum readability, use pure white or a very light grey for body text against the deep blues, especially #000080.
Reserve the brighter #00BFFF for accents and interactive elements to maintain visual hierarchy and prevent eye strain from over-saturation in large areas.

Recommended combinations

Abyssal Glow

Ideal for website headers or hero sections where deep background meets vibrant highlights, evoking a sense of discovery.

#000080 · #0000CD · #00BFFF

Violet Depths

Excellent for secondary content blocks, data visualizations, or subtle branding elements that require a mysterious, sophisticated touch.

#000080 · #6A5ACD · #8A2BE2

Electric Trench

Perfect for dashboards, infographics, or interactive elements requiring clear differentiation and visual energy with a futuristic feel.

#0000CD · #00BFFF · #8A2BE2

CSS variables

:root {
  --oceanic-trench-bloom-1: #000080;
  --oceanic-trench-bloom-2: #0000CD;
  --oceanic-trench-bloom-3: #00BFFF;
  --oceanic-trench-bloom-4: #6A5ACD;
  --oceanic-trench-bloom-5: #8A2BE2;
}

Tailwind config

theme: {
  extend: {
    colors: {
      "oceanic-trench-bloom": {
        1: "#000080",
        2: "#0000CD",
        3: "#00BFFF",
        4: "#6A5ACD",
        5: "#8A2BE2",
      }
    }
  }
}

Hex values

Color 1#000080

Color 2#0000CD

Color 3#00BFFF

Color 4#6A5ACD

Color 5#8A2BE2

Accessibility

Contrast checker

1.4:1Fail

7.5:1AAA

3:1AA18

2.7:1Fail

1.4:1Fail

5.3:1AA

2.1:1Fail

1.9:1Fail

7.5:1AAA

5.3:1AA

2.5:1Fail

2.8:1Fail

3:1AA18

2.1:1Fail

2.5:1Fail

1.1:1Fail

2.7:1Fail

1.9:1Fail

2.8:1Fail

1.1:1Fail

Similar palettes

More like Oceanic Trench Bloom

View all Dark

Deep Ocean Abyss

Abyssal Bioluminescence

Abyssal Seaweed Garden

Deep Forest Murmur

Oceanic Abyss Flora

Oceanic Abyss Murmur