Back to palettes

Palette

Twilight Ocean Vortex

A profoundly dark and enigmatic palette, like gazing into the swirling, deep indigo vortex of the twilight ocean.

darkdark5 colors
More dark palettes

Preview

See it in context.

Interface

New

Ready when you are.

A quick look at how Twilight Ocean Vortex 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 Twilight Ocean Vortex.

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

Data visualization

#0B0B45#1E1E70#3B3B9D#5D5DBF#050522

Palette guide

How to use Twilight Ocean Vortex

Overview

The "Twilight Ocean Vortex" palette plunges into the profound depths of the ocean at dusk, offering a range of intensely dark and mysterious blues. Dominated by the almost black #050522 and the deep indigo #0B0B45, it introduces progressively lighter yet still profound shades like #1E1E70, #3B3B9D, and the vibrant #5D5DBF. This collection is perfect for projects demanding a sense of extreme depth, solemnity, and understated power. It's particularly effective for creating immersive digital experiences or branding that conveys authority, mystery, and a connection to the vast unknown.

Best used for

  • Deep-sea exploration themes
  • Luxury watch brands
  • Cybersecurity interfaces
  • Sci-fi game environments
  • Abstract art installations
  • High-end technology branding

Suggested color roles

primary

#050522 or #0B0B45 should be used for the main background or large sections, establishing immediate depth.

secondary

#1E1E70 or #3B3B9D are ideal for sub-sections, navigation, or subtle data visualization, maintaining the dark theme.

accent

#5D5DBF provides a powerful, glowing accent for interactive elements, alerts, or key visual highlights.

background

#050522 for an ultra-dark, immersive experience; #0B0B45 for a slightly less intense but still profound base.

text

Use #5D5DBF or a bright white for text on the darkest backgrounds like #050522, ensuring readability.

Accessibility notes

  • Crucially, ensure #5D5DBF or bright white text has sufficient contrast against all darker blues.
  • Avoid using #050522 and #0B0B45 for text/background combinations, as contrast will be too low.
  • Use #5D5DBF generously for interactive elements to make them easily discoverable.
  • Consider adding a subtle glow effect to text or UI elements in #5D5DBF for better visibility on dark backgrounds.

Recommended combinations

Abyssal Depth

Creates a dramatic, high-contrast dark mode with glowing accents.

#050522 · #1E1E70 · #5D5DBF

Twilight Currents

Ideal for dynamic backgrounds or data visualization in tech interfaces.

#0B0B45 · #3B3B9D · #5D5DBF

Mystic Glow

Excellent for gradients or layered effects that suggest depth and light.

#1E1E70 · #3B3B9D · #5D5DBF

CSS variables

:root {
  --twilight-ocean-vortex-1: #0B0B45;
  --twilight-ocean-vortex-2: #1E1E70;
  --twilight-ocean-vortex-3: #3B3B9D;
  --twilight-ocean-vortex-4: #5D5DBF;
  --twilight-ocean-vortex-5: #050522;
}

Tailwind config

theme: {
  extend: {
    colors: {
      "twilight-ocean-vortex": {
        1: "#0B0B45",
        2: "#1E1E70",
        3: "#3B3B9D",
        4: "#5D5DBF",
        5: "#050522",
      }
    }
  }
}

Related searches

deep blue color schemedark ocean palettemysterious indigo colorssci-fi ui colorsnavy blue dark theme

Palette colors

Hex values

Color 1#0B0B45
·
Color 2#1E1E70
·
Color 3#3B3B9D
·
Color 4#5D5DBF
·
Color 5#050522
·

Accessibility

Contrast checker

1
2
3
4
5
1
1.3:1Fail
2:1Fail
3.3:1AA18
1.1:1Fail
2
1.3:1Fail
1.6:1Fail
2.6:1Fail
1.4:1Fail
3
2:1Fail
1.6:1Fail
1.6:1Fail
2.2:1Fail
4
3.3:1AA18
2.6:1Fail
1.6:1Fail
3.6:1AA18
5
1.1:1Fail
1.4:1Fail
2.2:1Fail
3.6:1AA18

Similar palettes

More like Twilight Ocean Vortex

View all dark
Deep Sea Luminescence
Abyss Gaze
Abyssal Bioluminescent Glow
Abyssal Coral Bloom
Abyssal Coral Bloom
Abyssal Coral Glow