Back to palettes

Palette

Deep Ocean Twilight

Reflects the somber, deep blue transition where ocean meets the encroaching night sky.

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

#000040#002060#004080#0060A0#A0C4E0

Palette guide

How to use Deep Ocean Twilight

Overview

The Deep Ocean Twilight palette (version 6) reflects the somber, deep blue transition where the ocean meets the encroaching night sky, offering a captivating range of cool blues. From the near-black #000040 to the soft, ethereal #A0C4E0, this palette is ideal for evoking mystery, tranquility, and sophistication. Designers can craft immersive digital experiences, elegant branding, and serene user interfaces. Developers will find these hex codes perfect for dark mode implementations, data visualization, and any project that benefits from a profound, yet clear, blue aesthetic. The progression from #002060 to #0060A0 provides excellent opportunities for layering and visual hierarchy.

Best used for

  • High-tech enterprise dashboards
  • Astronomy or space exploration websites
  • Luxury brand packaging design
  • Dark theme video game interfaces
  • Environmental conservation websites
  • Evening wear fashion branding

Suggested color roles

primary

Designate #002060 as the foundational blue for main content areas, offering a rich, stable background.

secondary

Apply #004080 for secondary UI elements, cards, or navigation, providing a noticeable yet harmonious contrast.

accent

Introduce #A0C4E0 for subtle highlights, interactive states, or key information, offering a luminous contrast that catches the eye.

background

The deepest shade, #000040, is perfect for overall application backgrounds, creating an immersive, dark, and sophisticated canvas.

text

Use a pure white or very light gray for primary text on dark backgrounds. For secondary text, #A0C4E0 can provide excellent contrast on #000040 or #002060.

Accessibility notes

  • Ensure sufficient contrast for text on #000040, #002060, and #004080 by using light text colors (e.g., white or #A0C4E0).
  • The lightest color, #A0C4E0, offers excellent contrast for primary text against any of the darker blues.
  • Avoid using adjacent dark blues like #000040 and #002060 for small text or critical elements without careful contrast checks.
  • Always test color combinations with accessibility tools to meet WCAG AA or AAA standards for readability.

Recommended combinations

Deep Gradient

Ideal for creating a smooth, deep background gradient or layered UI elements that convey depth.

#000040 · #002060 · #004080

Twilight Sky

Use #002060 as a base, with #0060A0 for prominent features and #A0C4E0 for highlights or celestial elements.

#002060 · #0060A0 · #A0C4E0

Cool Contrast

Excellent for a dark, immersive background with a bright, clear accent color and a strong mid-tone for balance.

#000040 · #A0C4E0 · #0060A0

CSS variables

:root {
  --deep-ocean-twilight-6-1: #000040;
  --deep-ocean-twilight-6-2: #002060;
  --deep-ocean-twilight-6-3: #004080;
  --deep-ocean-twilight-6-4: #0060A0;
  --deep-ocean-twilight-6-5: #A0C4E0;
}

Tailwind config

theme: {
  extend: {
    colors: {
      "deep-ocean-twilight-6": {
        1: "#000040",
        2: "#002060",
        3: "#004080",
        4: "#0060A0",
        5: "#A0C4E0",
      }
    }
  }
}

Related searches

cool blue color schemesdeep navy web designtwilight blue brandingdark mode blue paletteethereal blue hex codes

Palette colors

Hex values

Color 1#000040
·
Color 2#002060
·
Color 3#004080
·
Color 4#0060A0
·
Color 5#A0C4E0
·

Accessibility

Contrast checker

1
2
3
4
5
1
1.3:1Fail
1.9:1Fail
3:1Fail
10.7:1AAA
2
1.3:1Fail
1.5:1Fail
2.3:1Fail
8.3:1AAA
3
1.9:1Fail
1.5:1Fail
1.6:1Fail
5.6:1AA
4
3:1Fail
2.3:1Fail
1.6:1Fail
3.6:1AA18
5
10.7:1AAA
8.3:1AAA
5.6:1AA
3.6:1AA18

Similar palettes

More like Deep Ocean Twilight

View all dark
Cobalt Abyss Dive
Abyssal Coral Bloom
Abyssal Coral Bloom
Abyssal Vent Minerals
Deep Ocean Trench
Deep Ocean Twilight