Palette

Deep Ocean Twilight

A mysterious journey into the abyssal depths, where light barely penetrates, revealing hidden wonders.

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

#0A1C2C#1B3F5B#3A6B8D#67A0B9#A9D1E8

Palette guide

How to use Deep Ocean Twilight

Overview

The Deep Ocean Twilight palette (version 7) guides you into abyssal depths where light barely penetrates, revealing hidden wonders through its serene range of blues. From the profound #0A1C2C to the airy #A9D1E8, this palette is perfect for creating designs that exude tranquility, depth, and a touch of mystery. Designers can craft immersive digital environments, sophisticated branding, and calming user interfaces. Developers will find these hex codes invaluable for dark themes, data visualization, and any project that requires a harmonious and professional blue aesthetic. The thoughtful progression from #1B3F5B to #67A0B9 ensures versatility and visual appeal.

Best used for

Environmental research and conservation sites
Luxury wellness and spa branding
Scientific data visualization platforms
Documentaries about deep-sea exploration
Architectural firm portfolios
Educational apps for marine biology

Suggested color roles

primary

Utilize #1B3F5B as the core background or primary content color, providing a stable, deep, and professional foundation.

secondary

Apply #3A6B8D for secondary content blocks, panels, or navigation, offering a subtle yet distinct visual separation.

accent

Introduce #A9D1E8 for crucial calls-to-action, key information, or interactive elements, providing a clear, luminous highlight.

background

The deepest #0A1C2C is ideal for expansive backgrounds or header sections, establishing an immediate sense of depth and mystery.

text

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

Accessibility notes

Ensure high contrast for text on #0A1C2C, #1B3F5B, and #3A6B8D by using light text (e.g., white or #A9D1E8).
The lightest color, #A9D1E8, provides excellent contrast for primary text against all darker blues in the palette.
Avoid using #0A1C2C and #1B3F5B for small text or critical UI elements in close proximity without careful contrast checks.
Always test color combinations with accessibility tools to ensure WCAG compliance for readability.

Recommended combinations

Abyssal Layers

Perfect for creating a multi-layered dark background or card system, conveying depth and sophistication.

#0A1C2C · #1B3F5B · #3A6B8D

Serene Glow

Use #1B3F5B as a base, with #67A0B9 for secondary elements and #A9D1E8 for luminous highlights or interactive states.

#1B3F5B · #67A0B9 · #A9D1E8

Deep Contrast

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

#0A1C2C · #A9D1E8 · #3A6B8D

CSS variables

:root {
  --deep-ocean-twilight-7-1: #0A1C2C;
  --deep-ocean-twilight-7-2: #1B3F5B;
  --deep-ocean-twilight-7-3: #3A6B8D;
  --deep-ocean-twilight-7-4: #67A0B9;
  --deep-ocean-twilight-7-5: #A9D1E8;
}

Tailwind config

theme: {
  extend: {
    colors: {
      "deep-ocean-twilight-7": {
        1: "#0A1C2C",
        2: "#1B3F5B",
        3: "#3A6B8D",
        4: "#67A0B9",
        5: "#A9D1E8",
      }
    }
  }
}

Hex values

Color 1#0A1C2C

Color 2#1B3F5B

Color 3#3A6B8D

Color 4#67A0B9

Color 5#A9D1E8

Accessibility

Contrast checker

1.6:1Fail

3:1AA18

6:1AA

10.7:1AAA

1.6:1Fail

1.9:1Fail

3.8:1AA18

6.8:1AA

3:1AA18

1.9:1Fail

2:1Fail

3.5:1AA18