Back to palettes

Palette

Deep Ocean Twilight

A profound palette that mirrors the enigmatic and tranquil depths of the deep sea at dusk.

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

#000B2A#0C2E5D#1A528F#3B7BA8#081F3D

Palette guide

How to use Deep Ocean Twilight

Overview

The Deep Ocean Twilight palette mirrors the enigmatic and tranquil depths of the deep sea at dusk, offering a profound journey through its blue spectrum. From the near-black #000B2A to the vivid #3B7BA8, this palette creates a sense of mystery and calm. Designers can leverage these shades to build immersive digital experiences, while developers will find them ideal for dark themes, brand consistency, and crafting sophisticated user interfaces. The interplay between #0C2E5D and #1A528F allows for dynamic layering and visual hierarchy, making it perfect for storytelling or elegant branding that requires depth and clarity.

Best used for

  • Marine conservation organization websites
  • Luxury watch or jewelry brand sites
  • Science fiction game environments
  • Dark mode UI for professional applications
  • Oceanography research platforms
  • Art installations or digital exhibitions

Suggested color roles

primary

Utilize #0C2E5D as the main background or primary content color, providing a deep and stable foundation for your design.

secondary

Apply #1A528F for secondary elements like cards, navigation, or sub-headers, adding depth and visual interest.

accent

Introduce #3B7BA8 as a vibrant accent for calls-to-action, interactive elements, or key information, ensuring high visibility.

background

The darkest shade, #000B2A, is perfect for immersive full-screen backgrounds or header sections, establishing a profound, twilight mood.

text

For optimal readability, use a crisp white or very light gray. #3B7BA8 can be used for larger text elements or headings on the darkest backgrounds.

Accessibility notes

  • Ensure sufficient contrast for text on #000B2A, #0C2E5D, and #081F3D by using light text (e.g., white or #3B7BA8).
  • The lighter color, #3B7BA8, provides excellent contrast for primary text against all darker blues in the palette.
  • Avoid using adjacent dark blues like #000B2A and #081F3D for small text or critical UI elements without careful contrast checks.
  • Always test color combinations with accessibility tools to ensure WCAG compliance for readability.

Recommended combinations

Abyssal Layers

Ideal for layered dark backgrounds or card interfaces, providing subtle depth and a mysterious feel.

#000B2A · #081F3D · #0C2E5D

Twilight Glow

Use #0C2E5D as a base, with #1A528F for sub-elements and #3B7BA8 for luminous highlights or interactive states.

#0C2E5D · #1A528F · #3B7BA8

Deep Focus

Excellent for a dark, immersive background with a clear, vibrant accent and a balanced mid-tone for supporting details.

#000B2A · #3B7BA8 · #1A528F

CSS variables

:root {
  --deep-ocean-twilight-1: #000B2A;
  --deep-ocean-twilight-2: #0C2E5D;
  --deep-ocean-twilight-3: #1A528F;
  --deep-ocean-twilight-4: #3B7BA8;
  --deep-ocean-twilight-5: #081F3D;
}

Tailwind config

theme: {
  extend: {
    colors: {
      "deep-ocean-twilight": {
        1: "#000B2A",
        2: "#0C2E5D",
        3: "#1A528F",
        4: "#3B7BA8",
        5: "#081F3D",
      }
    }
  }
}

Related searches

deep sea blue palettetwilight marine colorsabyss blue hex codesdark blue UI designmysterious water scheme

Palette colors

Hex values

Color 1#000B2A
·
Color 2#0C2E5D
·
Color 3#1A528F
·
Color 4#3B7BA8
·
Color 5#081F3D
·

Accessibility

Contrast checker

1
2
3
4
5
1
1.4:1Fail
2.4:1Fail
4.2:1AA18
1.2:1Fail
2
1.4:1Fail
1.7:1Fail
2.9:1Fail
1.2:1Fail
3
2.4:1Fail
1.7:1Fail
1.7:1Fail
2.1:1Fail
4
4.2:1AA18
2.9:1Fail
1.7:1Fail
3.6:1AA18
5
1.2:1Fail
1.2:1Fail
2.1:1Fail
3.6:1AA18

Similar palettes

More like Deep Ocean Twilight

View all dark
Deep Ocean Cavern
Abyssal Trench Mystery
Abyssal Trench Mystery
Deep Fathom Mystery
Deep Ocean Abyss
Deep Ocean Abyss