Back to palettes

Palette

Deep Ocean Twilight

Plunges into the mysterious depths of the ocean at twilight, where light barely touches.

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

#0F243E#2B4861#5C7D99#8FB0CA#1D3650

Palette guide

How to use Deep Ocean Twilight

Overview

The Deep Ocean Twilight palette (version 5) plunges into the mysterious depths where light barely touches, offering a sophisticated range of muted blues and teals. From the profound #0F243E to the atmospheric #8FB0CA, this palette evokes tranquility and unexplored beauty. Designers can utilize these shades to create serene and elegant interfaces, perfect for contemplative or high-end projects. Developers will find these hex codes invaluable for crafting dark mode experiences, sophisticated branding, and visual storytelling that requires a sense of depth and calm. The balanced progression, including #2B4861 and #5C7D99, provides ample flexibility for layering and achieving a refined aesthetic.

Best used for

  • High-end fashion or jewelry websites
  • Art gallery digital platforms
  • Documentary or educational content on marine life
  • Meditation and mindfulness apps
  • Corporate presentations seeking gravitas
  • Luxury travel brand websites

Suggested color roles

primary

Employ #1D3650 as the main background or primary section color, providing a solid, deep base that feels grounding.

secondary

Use #2B4861 for secondary panels, cards, or navigational elements to add subtle visual separation and depth.

accent

Introduce #8FB0CA as a delicate accent for highlights, small icons, or interactive states, offering a soft glow against the darker tones.

background

The deepest hue, #0F243E, is ideal for expansive backgrounds or hero sections, creating an immersive, twilight-like atmosphere.

text

For readability, use white or a very light gray. #8FB0CA can serve as a suitable text color for headlines or larger elements on the darkest backgrounds.

Accessibility notes

  • Ensure high contrast for text on #0F243E, #1D3650, and #2B4861 by using light text (e.g., white or #8FB0CA).
  • The lighter shades like #8FB0CA and #5C7D99 offer better contrast when used for text against the darkest blues.
  • Avoid placing #0F243E and #1D3650 next to each other for critical elements due to low contrast.
  • Regularly check text and interactive element contrast ratios against WCAG guidelines for user accessibility.

Recommended combinations

Deep Horizon

Excellent for creating a layered, dark background effect, mimicking the ocean's gradual deepening.

#0F243E · #1D3650 · #2B4861

Twilight Shimmer

Use #1D3650 for main content, with #5C7D99 for sub-elements and #8FB0CA for subtle, glowing accents.

#1D3650 · #5C7D99 · #8FB0CA

Muted Elegance

Ideal for a dark, elegant base with a soft, contrasting highlight and a mid-tone for details.

#0F243E · #8FB0CA · #2B4861

CSS variables

:root {
  --deep-ocean-twilight-5-1: #0F243E;
  --deep-ocean-twilight-5-2: #2B4861;
  --deep-ocean-twilight-5-3: #5C7D99;
  --deep-ocean-twilight-5-4: #8FB0CA;
  --deep-ocean-twilight-5-5: #1D3650;
}

Tailwind config

theme: {
  extend: {
    colors: {
      "deep-ocean-twilight-5": {
        1: "#0F243E",
        2: "#2B4861",
        3: "#5C7D99",
        4: "#8FB0CA",
        5: "#1D3650",
      }
    }
  }
}

Related searches

muted blue palettetwilight ocean colorsdeep sea UI designserene dark themeelegant blue-gray scheme

Palette colors

Hex values

Color 1#0F243E
·
Color 2#2B4861
·
Color 3#5C7D99
·
Color 4#8FB0CA
·
Color 5#1D3650
·

Accessibility

Contrast checker

1
2
3
4
5
1
1.6:1Fail
3.6:1AA18
6.9:1AA
1.3:1Fail
2
1.6:1Fail
2.2:1Fail
4.2:1AA18
1.3:1Fail
3
3.6:1AA18
2.2:1Fail
1.9:1Fail
2.9:1Fail
4
6.9:1AA
4.2:1AA18
1.9:1Fail
5.4:1AA
5
1.3:1Fail
1.3:1Fail
2.9:1Fail
5.4:1AA

Similar palettes

More like Deep Ocean Twilight

View all dark
Abyssal Midnight Reef
Deep Abyss Current
Deep Cobalt Plunge
Deep Ocean Abyss
Deep Ocean Trench
Deep Ocean Voyage