Back to palettes

Palette

Ocean Trench Secrets

Unveiling the mysterious, inky blues and greens of the deep ocean trenches.

darkdark5 colors
More dark palettes

Preview

See it in context.

Interface

New

Ready when you are.

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

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

Data visualization

#0A0A1F#1C2A3A#3B5B6D#5F8C9E#8FAEB6

Palette guide

How to use Ocean Trench Secrets

Overview

The "Ocean Trench Secrets" palette plunges into the mysterious, inky blues and greens of the deep ocean. This dark and sophisticated collection, featuring #0A0A1F, #1C2A3A, and #3B5B6D, is ideal for projects requiring a sense of depth, elegance, and intrigue. Designers can use these hues to craft immersive interfaces, while developers will find the gradient from dark to lighter tones, including #5F8C9E and #8FAEB6, perfect for conveying hierarchy and focus. It's a palette that commands attention without being overtly vibrant, offering a rich, contemplative atmosphere suitable for high-end digital experiences, evoking the profound beauty of the unexplored abyss.

Best used for

  • Luxury brand websites and apps
  • Documentary film branding
  • High-tech product interfaces
  • Gaming UI/UX for fantasy or sci-fi
  • Night mode themes for applications
  • Architectural visualization mood boards

Suggested color roles

primary

Utilize #0A0A1F as the foundational, deepest blue, perfect for backgrounds, large headers, or elements requiring significant visual weight, conveying ultimate depth.

secondary

Employ #1C2A3A as a supporting dark blue, excellent for sub-sections, card backgrounds, or secondary navigation, adding subtle differentiation.

accent

Introduce #8FAEB6 as a luminous accent, ideal for calls-to-action, progress indicators, or interactive elements, providing a crucial point of contrast and visual interest.

background

Use #0A0A1F for primary backgrounds to establish a deep, immersive environment, or #1C2A3A for softer dark sections.

text

For primary body text on dark backgrounds, use #8FAEB6 or a light grey like #E0E0E0 to ensure excellent readability and a soft glow.

Accessibility notes

  • Always ensure sufficient contrast for text, especially when using lighter colors like #8FAEB6 on darker backgrounds like #0A0A1F.
  • Avoid using #1C2A3A for small text on #0A0A1F backgrounds as contrast may be insufficient for WCAG AA.
  • Leverage #8FAEB6 for interactive elements to provide clear visual cues against the deep backdrop.
  • For larger headings, #3B5B6D can be used on #0A0A1F, but verify contrast for readability.

Recommended combinations

Abyssal Depths

A strong dark base with a slightly lighter dark for content and a bright accent for key information or interactivity.

#0A0A1F · #1C2A3A · #8FAEB6

Trench Gradient

Create smooth transitions or layered elements that mimic the gradual change of light in deep water.

#1C2A3A · #3B5B6D · #5F8C9E

Mystic Glow

Perfect for dark themes where a lighter blue provides depth and the brightest color highlights important UI elements.

#0A0A1F · #5F8C9E · #8FAEB6

CSS variables

:root {
  --ocean-trench-secrets-1: #0A0A1F;
  --ocean-trench-secrets-2: #1C2A3A;
  --ocean-trench-secrets-3: #3B5B6D;
  --ocean-trench-secrets-4: #5F8C9E;
  --ocean-trench-secrets-5: #8FAEB6;
}

Tailwind config

theme: {
  extend: {
    colors: {
      "ocean-trench-secrets": {
        1: "#0A0A1F",
        2: "#1C2A3A",
        3: "#3B5B6D",
        4: "#5F8C9E",
        5: "#8FAEB6",
      }
    }
  }
}

Related searches

deep ocean color schemedark mysterious paletteluxury blue green colorssci-fi ui colorsoceanic dark theme

Palette colors

Hex values

Color 1#0A0A1F
·
Color 2#1C2A3A
·
Color 3#3B5B6D
·
Color 4#5F8C9E
·
Color 5#8FAEB6
·

Accessibility

Contrast checker

1
2
3
4
5
1
1.3:1Fail
2.7:1Fail
5.3:1AA
8.3:1AAA
2
1.3:1Fail
2:1Fail
4:1AA18
6.2:1AA
3
2.7:1Fail
2:1Fail
2:1Fail
3.1:1AA18
4
5.3:1AA
4:1AA18
2:1Fail
1.6:1Fail
5
8.3:1AAA
6.2:1AA
3.1:1AA18
1.6:1Fail

Similar palettes

More like Ocean Trench Secrets

View all dark
Bioluminescent Deep Trench
Deep Ocean Caverns
Deep Sea Explorer
Quiet Ocean Floor
Submarine Abyss Light
Abyss Gaze