Back to palettes

Palette

Deep Ocean Twilight

Captures the profound blues of the deep ocean where sunlight struggles to penetrate, leading to perpetual twilight.

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

#00008B#0000CD#4682B4#191970#0A1128

Palette guide

How to use Deep Ocean Twilight

Overview

The Deep Ocean Twilight palette (ID: deep-ocean-twilight-2) captures the profound blues of the ocean where sunlight struggles to penetrate, leading to perpetual twilight. Featuring classic deep blues like #00008B (dark navy), #0000CD (royal blue), and #4682B4 (steel blue), this palette offers a blend of timeless authority and subdued mystery. Designers and developers can leverage these colors for projects requiring a strong, established, yet sophisticated aesthetic. It’s ideal for corporate identities, academic platforms, or any application seeking a classic deep blue theme with a touch of enigmatic charm, ensuring professionalism and depth.

Best used for

  • Corporate and legal firm branding
  • Financial institutions websites
  • Academic and educational platforms
  • Classic software interfaces
  • Military or naval-themed designs
  • Timeless, authoritative web presence

Suggested color roles

primary

Use #0000CD as the dominant color for key elements and calls to action, offering a strong, royal blue presence.

secondary

Apply #00008B for supporting details, sub-sections, or borders, providing a darker, authoritative navy.

accent

Designate #4682B4 (steel blue) for highlights, interactive states, or subtle differentiation, offering a lighter contrast.

background

Utilize #0A1128 as the deepest background color, creating a profound and stable foundation.

text

Employ white or a very light gray (e.g., #F5F5F5) for all text on darker backgrounds. Darker blues like #0A1128 can be used on #4682B4.

Accessibility notes

  • Light text (white or near-white) is crucial for readability on #00008B, #0000CD, and #0A1128 to meet WCAG standards.
  • The steel blue, #4682B4, offers good contrast for accents or even text when placed on the darkest blues.
  • Avoid using #00008B and #191970 for adjacent text and background due to their very similar dark values.
  • Test text on #4682B4 to ensure sufficient contrast, especially with medium-dark text colors.

Recommended combinations

Classic Authority

For a strong, authoritative brand with a deep background, a vibrant primary, and a distinct accent.

#0A1128 · #0000CD · #4682B4

Twilight Harmony

To create a cohesive, deep blue interface with subtle distinctions between closely related tones.

#00008B · #191970 · #0000CD

Deep Contrast

Ideal for a professional dark mode, emphasizing content with a lighter blue against a profound base.

#0A1128 · #4682B4 · #00008B

CSS variables

:root {
  --deep-ocean-twilight-2-1: #00008B;
  --deep-ocean-twilight-2-2: #0000CD;
  --deep-ocean-twilight-2-3: #4682B4;
  --deep-ocean-twilight-2-4: #191970;
  --deep-ocean-twilight-2-5: #0A1128;
}

Tailwind config

theme: {
  extend: {
    colors: {
      "deep-ocean-twilight-2": {
        1: "#00008B",
        2: "#0000CD",
        3: "#4682B4",
        4: "#191970",
        5: "#0A1128",
      }
    }
  }
}

Related searches

navy blue color schemedeep twilight paletteclassic blue brandingauthoritative blue colorsprofessional dark blue

Palette colors

Hex values

Color 1#00008B
·
Color 2#0000CD
·
Color 3#4682B4
·
Color 4#191970
·
Color 5#0A1128
·

Accessibility

Contrast checker

1
2
3
4
5
1
1.4:1Fail
3.7:1AA18
1:1Fail
1.2:1Fail
2
1.4:1Fail
2.7:1Fail
1.3:1Fail
1.7:1Fail
3
3.7:1AA18
2.7:1Fail
3.6:1AA18
4.5:1AA
4
1:1Fail
1.3:1Fail
3.6:1AA18
1.3:1Fail
5
1.2:1Fail
1.7:1Fail
4.5:1AA
1.3:1Fail

Similar palettes

More like Deep Ocean Twilight

View all dark
Cobalt Abyss Dive
Deep Ocean Twilight
Deep Sea Bioluminescence
Deep Sea Serpent
Ocean Depths Current
Abyssal Bioluminescence