Back to palettes

Palette

Submarine Abyss Light

A progression of profound blues, illustrating the transition from twilight waters to the deepest, mysterious ocean trench.

darkdark5 colors
More dark palettes

Preview

See it in context.

Interface

New

Ready when you are.

A quick look at how Submarine Abyss Light 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 Submarine Abyss Light.

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 Submarine Abyss Light

Overview

The Submarine Abyss Light palette offers a profound progression of blues, illustrating the transition from twilight waters to the deepest ocean trench. Comprising #000033, #000066, #000099, #0000CC, and #0000FF, this monochromatic collection is perfect for designers and developers seeking to evoke mystery, depth, and sophistication. Its dark, cool tones are ideal for creating immersive digital experiences, luxury branding, or any project that benefits from a serene yet powerful aesthetic. This palette excels in crafting elegant dark mode interfaces with a sense of calm.

Best used for

  • Luxury brand websites and apps
  • Technology company branding
  • Nature documentaries and marine biology content
  • Dark mode user interfaces
  • High-end editorial design
  • Sophisticated digital art

Suggested color roles

primary

#000066 (Navy Blue): A strong, foundational color for main brand elements, primary navigation, and bold headings in a dark theme.

secondary

#000099 (Dark Blue): Excellent for supporting panels, active states, or as a subtle border color to add depth without harsh contrast.

accent

#0000FF (Blue): Use sparingly for subtle highlights, interactive elements, or small icons to provide a gentle pop of vibrancy against the darker blues.

background

#000033 (Deep Navy): The ideal primary background for a true dark mode experience, offering a sense of depth and allowing lighter elements to float serenely.

text

#0000CC (Medium Blue): Works well for secondary text or subtle headings on the darkest backgrounds. For main body text, consider a very light grey or white for optimal readability.

Accessibility notes

  • Ensure sufficient luminance contrast for text when using different shades of blue, especially for smaller font sizes.
  • Using #0000CC for body text on #000033 might require a larger font size or bolding to meet WCAG AA standards.
  • This palette is naturally strong for dark mode but always verify contrast for all interactive elements and text.
  • Avoid using very similar shades for text and background to prevent visual fatigue and readability issues.

Recommended combinations

Abyss Depth

Creates a seamless gradient of deep blues, perfect for layered backgrounds, data visualizations, or subtle transitions.

#000033 · #000066 · #000099

Ocean Glow

Highlights interactive elements or critical information with a gentle, glowing effect against a darker base.

#0000CC · #0000FF · #000066

Deep Serenity

A calming and sophisticated blend, ideal for main content areas where readability and a tranquil mood are key.

#000099 · #000033 · #0000CC

CSS variables

:root {
  --submarine-abyss-light-1: #000033;
  --submarine-abyss-light-2: #000066;
  --submarine-abyss-light-3: #000099;
  --submarine-abyss-light-4: #0000CC;
  --submarine-abyss-light-5: #0000FF;
}

Tailwind config

theme: {
  extend: {
    colors: {
      "submarine-abyss-light": {
        1: "#000033",
        2: "#000066",
        3: "#000099",
        4: "#0000CC",
        5: "#0000FF",
      }
    }
  }
}

Related searches

deep blue color schemesdark mode palettesocean inspired colorsmonochromatic blueluxury brand colors

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 Submarine Abyss Light

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