Back to palettes

Palette

Deep Ocean Twilight

Immersive blues delve into the enigmatic depths of the ocean at twilight, where mysteries unfold beneath the surface.

darkdark5 colors
More dark palettes

Preview

See it in context.

Interface

New

Ready when you are.

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

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

Data visualization

#000033#000066#000099#0033CC#4682B4

Palette guide

How to use Deep Ocean Twilight

Overview

The Deep Ocean Twilight palette offers a journey into the serene, enigmatic depths of the ocean at dusk. Dominated by a spectrum of profound blues, from the near-black #000033 to the vibrant, yet subdued #0033CC, it evokes a sense of calm and mystery. Designers will appreciate the cohesive gradient for creating immersive digital experiences, while developers can leverage these hex codes for consistent branding across dark themes, UI elements, and data visualizations. The lighter #4682B4 provides a crucial contrast point, preventing the overall design from feeling too heavy and allowing for subtle highlights that mimic bioluminescence or distant light penetrating the water. This palette is ideal for projects requiring sophistication and depth.

Best used for

  • Luxury brand websites or apps
  • Nature documentaries or marine biology content
  • Dark mode UI themes
  • Science fiction game environments
  • Professional corporate branding
  • Event branding for evening galas

Suggested color roles

primary

Utilize #000066 as a foundational dark blue for large background areas or primary content blocks, establishing a deep, mysterious base.

secondary

Apply #000099 for prominent sections, headers, or interactive elements to add a layer of depth without losing the dark aesthetic.

accent

Introduce #0033CC for calls-to-action, navigation highlights, or key graphical elements to draw attention with a vibrant, yet integrated, pop of color.

background

Employ the darkest shade, #000033, for main backgrounds, providing a true 'twilight' feel, ideal for immersive experiences.

text

Pair with a crisp white or very light gray text for maximum readability on dark backgrounds. For lighter text elements, #4682B4 can be used on darker blues.

Accessibility notes

  • Ensure sufficient contrast when placing any text on #000033 or #000066; use white or very light grey.
  • The lighter blues like #0033CC and #4682B4 offer better contrast for text against the darkest shades.
  • Avoid using #000033 and #000066 for small text elements against each other without significant size/weight.
  • Test all color combinations with accessibility tools to meet WCAG AA or AAA standards for text contrast.

Recommended combinations

Abyssal Depths

Ideal for creating a deep, immersive background with subtle layered elements in dark mode interfaces.

#000033 · #000066 · #000099

Twilight Glow

Use for UI components where #0033CC acts as an accent on a darker base, with #4682B4 for secondary details.

#000066 · #0033CC · #4682B4

Deep Contrast

Excellent for a dark background with a clear light accent, suitable for hero sections or prominent calls to action.

#000033 · #4682B4 · #0033CC

CSS variables

:root {
  --deep-ocean-twilight-3-1: #000033;
  --deep-ocean-twilight-3-2: #000066;
  --deep-ocean-twilight-3-3: #000099;
  --deep-ocean-twilight-3-4: #0033CC;
  --deep-ocean-twilight-3-5: #4682B4;
}

Tailwind config

theme: {
  extend: {
    colors: {
      "deep-ocean-twilight-3": {
        1: "#000033",
        2: "#000066",
        3: "#000099",
        4: "#0033CC",
        5: "#4682B4",
      }
    }
  }
}

Related searches

dark blue color palettedeep ocean hex codestwilight blue design inspirationmysterious color schemesnavy and light blue palette

Palette colors

Hex values

Color 1#000033
·
Color 2#000066
·
Color 3#000099
·
Color 4#0033CC
·
Color 5#4682B4
·

Accessibility

Contrast checker

1
2
3
4
5
1
1.1:1Fail
1.4:1Fail
2.2:1Fail
4.9:1AA
2
1.1:1Fail
1.2:1Fail
2:1Fail
4.3:1AA18
3
1.4:1Fail
1.2:1Fail
1.6:1Fail
3.5:1AA18
4
2.2:1Fail
2:1Fail
1.6:1Fail
2.2:1Fail
5
4.9:1AA
4.3:1AA18
3.5:1AA18
2.2:1Fail

Similar palettes

More like Deep Ocean Twilight

View all dark
Abyss Gaze
Abyssal Bioluminescence
Abyssal Bioluminescent Glow
Abyssal Coral Glow
Abyssal Depths
Abyssal Midnight Reef