Back to palettes

Palette

Deep Ocean Twilight

Gradual blues echoing the profound depths where twilight meets the silent, mysterious ocean floor.

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

#0D1B2A#1B2E49#2B406A#3B528B#4E64A5

Palette guide

How to use Deep Ocean Twilight

Overview

The Deep Ocean Twilight palette (version 4) captures the profound depths where twilight meets the silent ocean floor, featuring a harmonious gradient of sophisticated blues. From the darkest #0D1B2A to the lighter #4E64A5, this palette provides a versatile foundation for designs requiring elegance and a sense of calm. Designers can leverage these shades to build immersive interfaces, while developers will find them ideal for dark themes, brand consistency, and creating a luxurious user experience. The subtle shifts between #1B2E49 and #2B406A allow for depth and layering, making it perfect for complex visual storytelling or minimalist yet impactful designs.

Best used for

  • High-end technology interfaces
  • Luxury product branding
  • Documentary film titles or credits
  • Educational marine biology platforms
  • Corporate websites with a modern aesthetic
  • Serene meditation or wellness apps

Suggested color roles

primary

Designate #1B2E49 as the primary background color, providing a stable and deep foundation that is visually appealing.

secondary

Utilize #2B406A for secondary content areas, panels, or navigation elements, offering a subtle contrast to the primary blue.

accent

Apply #4E64A5 to highlight key interactive elements, calls to action, or important data points, ensuring visibility without being overly bright.

background

The deepest #0D1B2A is perfect for immersive full-screen backgrounds or header sections, setting a mysterious, profound mood.

text

For optimal readability, use a crisp white or a very light gray on the darker blues. For accents or subheadings, #4E64A5 can work on #0D1B2A or #1B2E49.

Accessibility notes

  • Ensure sufficient contrast for text on #0D1B2A and #1B2E49, using light text colors (e.g., white).
  • The lighter #4E64A5 offers better contrast for text against the darkest shades like #0D1B2A.
  • Avoid using adjacent colors like #0D1B2A and #1B2E49 for small text or critical UI elements without sufficient contrast.
  • Verify all text and interactive element contrast ratios with WCAG guidelines for accessibility compliance.

Recommended combinations

Subtle Depth

Ideal for creating layered backgrounds or card interfaces where subtle transitions are desired.

#0D1B2A · #1B2E49 · #2B406A

Twilight Highlight

Excellent for primary content areas where #3B528B provides structure and #4E64A5 adds a gentle highlight.

#1B2E49 · #3B528B · #4E64A5

Mystic Accent

Use #0D1B2A as a base, with #4E64A5 for strong accents and #2B406A for supporting details in a dark theme.

#0D1B2A · #4E64A5 · #2B406A

CSS variables

:root {
  --deep-ocean-twilight-4-1: #0D1B2A;
  --deep-ocean-twilight-4-2: #1B2E49;
  --deep-ocean-twilight-4-3: #2B406A;
  --deep-ocean-twilight-4-4: #3B528B;
  --deep-ocean-twilight-4-5: #4E64A5;
}

Tailwind config

theme: {
  extend: {
    colors: {
      "deep-ocean-twilight-4": {
        1: "#0D1B2A",
        2: "#1B2E49",
        3: "#2B406A",
        4: "#3B528B",
        5: "#4E64A5",
      }
    }
  }
}

Related searches

dark blue gradient paletteoceanic blue hex codesmysterious dark themessophisticated blue color schemedeep navy UI colors

Palette colors

Hex values

Color 1#0D1B2A
·
Color 2#1B2E49
·
Color 3#2B406A
·
Color 4#3B528B
·
Color 5#4E64A5
·

Accessibility

Contrast checker

1
2
3
4
5
1
1.3:1Fail
1.7:1Fail
2.3:1Fail
3.1:1AA18
2
1.3:1Fail
1.3:1Fail
1.8:1Fail
2.4:1Fail
3
1.7:1Fail
1.3:1Fail
1.4:1Fail
1.8:1Fail
4
2.3:1Fail
1.8:1Fail
1.4:1Fail
1.3:1Fail
5
3.1:1AA18
2.4:1Fail
1.8:1Fail
1.3:1Fail

Similar palettes

More like Deep Ocean Twilight

View all dark
Abyss Gaze
Abyssal Bioluminescent Glow
Abyssal Coral Glow
Abyssal Depths
Abyssal Rift Shimmer
Abyssal Trench Dive