Back to palettes

Palette

Deep Ocean Enigma

Explores the mysterious depths of the ocean with cool, enigmatic blues and dark undertones.

darkdark5 colors
More dark palettes

Preview

See it in context.

Interface

New

Ready when you are.

A quick look at how Deep Ocean Enigma 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 Enigma.

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

Data visualization

#001a33#003366#0f527c#4a7e99#1a1a2b

Palette guide

How to use Deep Ocean Enigma

Overview

The Deep Ocean Enigma palette plunges into mysterious aquatic depths, offering a sophisticated array of cool, enigmatic blues perfect for creating immersive digital experiences. Anchored by the profound darkness of #001a33 and the subtle grey-blue of #1a1a2b, it builds into richer tones like the classic deep blue #003366 and the more vibrant #0f527c. A striking contrast is introduced by the muted teal-blue of #4a7e99, which acts as a beacon against the darker backdrop. This palette is ideal for projects requiring a sense of depth, tranquility, and understated luxury, guiding users through a calm yet captivating visual journey with its harmonious cool tones.

Best used for

  • Luxury brand websites or apps
  • Underwater exploration or marine biology themes
  • High-tech dashboard interfaces
  • Evening event invitations or decor
  • Meditation or relaxation apps
  • Dark mode UI/UX designs

Suggested color roles

primary

#001a33 serves as the foundational, dominant presence, ideal for large backgrounds, main sections, or header areas to establish a profound, dark aesthetic.

secondary

#003366 provides a rich, deep blue that can complement the primary, used for significant components like card backgrounds, navigation elements, or prominent graphical features.

accent

#4a7e99 is the palette's bright spot, perfect for interactive elements, call-to-action buttons, progress indicators, or small decorative details that need to stand out.

background

#1a1a2b offers a slightly warmer, near-black base, excellent for full-page backgrounds, modals, or sidebars where a very dark, subtle texture is desired.

text

For dark backgrounds like #001a33 or #1a1a2b, use a light text color such as pure white (#FFFFFF) or a very light grey (#E0E0E0) for optimal readability. For text on #4a7e99, a dark grey or black is recommended.

Accessibility notes

  • Ensure sufficient contrast for text on all backgrounds, especially lighter text on #001a33, #003366, and #1a1a2b to meet WCAG AA standards.
  • The #4a7e99 accent color will require careful pairing with text; black or very dark grey will provide better contrast than white.
  • Avoid using #001a33 and #1a1a2b as text colors on light backgrounds as they will be hard to read due to low contrast.
  • Consider larger font sizes or bolding for critical information when using mid-tone blues like #0f527c for text on darker backgrounds to enhance readability.

Recommended combinations

Deep Contrast

Ideal for a dark UI where #001a33 is the main background, #0f527c defines sections, and #4a7e99 highlights interactive elements or key information.

#001A33 · #0F527C · #4A7E99

Enigmatic Gradient

Creates a sophisticated, layered look, perfect for hero sections or data visualizations, transitioning from the near-black #1a1a2b to the deeper blues.

#1A1A2B · #003366 · #0F527C

Subtle Accent

Use #003366 for primary content areas, #001a33 for subtle borders or secondary elements, and #4a7e99 for a gentle pop of color on icons or small buttons.

#003366 · #001A33 · #4A7E99

CSS variables

:root {
  --deep-ocean-enigma-1: #001a33;
  --deep-ocean-enigma-2: #003366;
  --deep-ocean-enigma-3: #0f527c;
  --deep-ocean-enigma-4: #4a7e99;
  --deep-ocean-enigma-5: #1a1a2b;
}

Tailwind config

theme: {
  extend: {
    colors: {
      "deep-ocean-enigma": {
        1: "#001a33",
        2: "#003366",
        3: "#0f527c",
        4: "#4a7e99",
        5: "#1a1a2b",
      }
    }
  }
}

Related searches

deep blue color schemedark ocean UI palettemysterious blue branding colorscool tone web designenigmatic digital art palette

Palette colors

Hex values

Color 1#001a33
·
Color 2#003366
·
Color 3#0f527c
·
Color 4#4a7e99
·
Color 5#1a1a2b
·

Accessibility

Contrast checker

1
2
3
4
5
1
1.4:1Fail
2.1:1Fail
4:1AA18
1:1Fail
2
1.4:1Fail
1.5:1Fail
2.8:1Fail
1.4:1Fail
3
2.1:1Fail
1.5:1Fail
1.9:1Fail
2.1:1Fail
4
4:1AA18
2.8:1Fail
1.9:1Fail
3.9:1AA18
5
1:1Fail
1.4:1Fail
2.1:1Fail
3.9:1AA18

Similar palettes

More like Deep Ocean Enigma

View all dark
Abyssal Trench Mystery
Deep Ocean Abyss
Deep Ocean Trench
Deep Sea Cavern
Ocean Depths Dream
Abyssal Midnight Reef