Back to palettes

Palette

Deep Sea Twilight

A profound dive into the ocean's twilight zone, where deep blues meet mysterious, dark accents.

darkdark5 colors
More dark palettes

Preview

See it in context.

Interface

New

Ready when you are.

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

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

Data visualization

#0F1E2E#1D3557#457B9D#A8DADC#2A2A40

Palette guide

How to use Deep Sea Twilight

Overview

The Deep Sea Twilight palette plunges into the enigmatic ocean depths, capturing the transition from light to profound darkness. It features a spectrum of deep blues, from the near-black #0F1E2E to the vibrant #457B9D, contrasted by a mysterious dark accent, #2A2A40, and a luminous highlight, #A8DADC. This palette is invaluable for designers and developers aiming to evoke a sense of calm, mystery, and aquatic beauty. Its versatility makes it suitable for projects requiring a sophisticated, cool-toned aesthetic, perfect for digital interfaces, branding, or environmental design.

Best used for

  • Marine conservation websites
  • Underwater exploration game interfaces
  • Science and educational platforms
  • Relaxation and meditation apps
  • Sophisticated tech company branding
  • Dark mode themes with a cool, deep feel

Suggested color roles

primary

#1D3557 - A rich, deep navy blue, excellent for main content areas or prominent UI components, providing a stable and authoritative presence.

secondary

#457B9D - A captivating medium blue, ideal for secondary headings, graphical elements, or interactive states, adding visual interest.

accent

#A8DADC - A bright, almost cyan-tinted light blue, perfect for calls-to-action, icons, or subtle highlights that need to pop against darker shades.

background

#0F1E2E - The darkest blue, serving as a profound and immersive background, establishing a sense of depth.

text

#A8DADC - For primary text on dark backgrounds, offering excellent readability and a consistent "twilight" aesthetic. Alternatively, a near-white for maximum contrast.

Accessibility notes

  • Ensure #A8DADC text on #0F1E2E or #1D3557 backgrounds meets WCAG AA standards for readability.
  • Exercise caution when using #457B9D for small text against #1D3557; ensure sufficient contrast.
  • The dark accent #2A2A40 should be used carefully, especially for text, as its contrast with other dark blues might be insufficient.
  • Provide clear focus states for interactive elements, perhaps using #A8DADC as a border or glow.

Recommended combinations

Twilight Depths

Creates a deep, layered background effect, perfect for hero sections or immersive full-screen experiences.

#0F1E2E · #1D3557 · #2A2A40

Ocean Glow

Excellent for data visualization or progressive disclosure, where colors move from deep to light.

#1D3557 · #457B9D · #A8DADC

Accented Contrast

Ideal for clear content hierarchy, with #0F1E2E as background, #A8DADC for headings, and #457B9D for supporting text.

#0F1E2E · #A8DADC · #457B9D

CSS variables

:root {
  --deep-sea-twilight-1: #0F1E2E;
  --deep-sea-twilight-2: #1D3557;
  --deep-sea-twilight-3: #457B9D;
  --deep-sea-twilight-4: #A8DADC;
  --deep-sea-twilight-5: #2A2A40;
}

Tailwind config

theme: {
  extend: {
    colors: {
      "deep-sea-twilight": {
        1: "#0F1E2E",
        2: "#1D3557",
        3: "#457B9D",
        4: "#A8DADC",
        5: "#2A2A40",
      }
    }
  }
}

Related searches

deep blue color paletteaquatic web design colorsocean twilight zone huesmysterious blue brandingdark mode blue theme

Palette colors

Hex values

Color 1#0F1E2E
·
Color 2#1D3557
·
Color 3#457B9D
·
Color 4#A8DADC
·
Color 5#2A2A40
·

Accessibility

Contrast checker

1
2
3
4
5
1
1.4:1Fail
3.7:1AA18
11:1AAA
1.2:1Fail
2
1.4:1Fail
2.7:1Fail
8.1:1AAA
1.1:1Fail
3
3.7:1AA18
2.7:1Fail
3:1AA18
3:1AA18
4
11:1AAA
8.1:1AAA
3:1AA18
9.1:1AAA
5
1.2:1Fail
1.1:1Fail
3:1AA18
9.1:1AAA

Similar palettes

More like Deep Sea Twilight

View all dark
Abyssal Bioluminescence
Abyss Gaze
Abyssal Bioluminescent Glow
Abyssal Coral Bloom
Abyssal Coral Bloom
Abyssal Coral Glow