Palette

Midnight Ocean Currents

A dark, mesmerizing palette that reflects the mysterious depths and unseen currents of the midnight ocean.

darkdark5 colors

More dark palettes

Preview

See it in context.

Interface

New

Ready when you are.

A quick look at how Midnight Ocean Currents 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 Midnight Ocean Currents.

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

Data visualization

#1A2C3D#3B5C7D#5E89AB#82B6D9#2A435B

Palette guide

How to use Midnight Ocean Currents

Overview

The Midnight Ocean Currents palette evokes the deep, mysterious allure of the sea after dusk. Its blend of rich, cool blues, from the profound #1A2C3D to the lighter, shimmering #82B6D9, offers designers and developers a sophisticated base for projects requiring depth and tranquility. The dark, enigmatic #2A435B provides an excellent foundation, while the mid-tones like #3B5C7D and #5E89AB create seamless transitions. This palette is ideal for conveying professionalism, serenity, and a touch of the unknown, making it versatile for both digital interfaces and brand identities seeking a calm yet impactful presence. It's a journey into the ocean's unseen beauty.

Best used for

Luxury brand websites and apps
Marine and environmental organizations
High-tech dashboard interfaces
Serene meditation or sleep apps
Editorial design for science or nature
Sophisticated interior design concepts

Suggested color roles

primary

Use #1A2C3D as the dominant background or main informational panels to establish a deep, stable foundation.

secondary

Employ #3B5C7D for supporting elements, subheadings, or secondary navigation to add layered depth without overt contrast.

accent

Apply #82B6D9 for calls to action, interactive elements, or key data points to provide a bright, clear highlight.

background

Utilize #2A435B for main backgrounds, creating an immersive, dark mode experience that feels both professional and calming.

text

Pair light text, such as #82B6D9 or pure white, against the darker shades for optimal readability and a crisp aesthetic.

Accessibility notes

Ensure high contrast for text on #1A2C3D and #2A435B; use lighter palette colors or white.
Differentiate interactive elements like buttons and links with #82B6D9 for clear visibility.
Avoid using #1A2C3D and #2A435B for small text as their proximity can reduce legibility.
Test color blindness compatibility, as blue tones can sometimes be difficult to distinguish for certain users.

Recommended combinations

Deep Serenity

For a calm, professional aesthetic in backgrounds and content blocks, offering gradual depth.

#1A2C3D · #3B5C7D · #5E89AB

Oceanic Contrast

Ideal for UI elements where #82B6D9 highlights interactive components against a dark base.

#2A435B · #82B6D9 · #5E89AB

Subtle Flow

Creates a sophisticated, layered look suitable for data visualization or complex information architecture.

#3B5C7D · #5E89AB · #1A2C3D

CSS variables

:root {
  --midnight-ocean-currents-1: #1A2C3D;
  --midnight-ocean-currents-2: #3B5C7D;
  --midnight-ocean-currents-3: #5E89AB;
  --midnight-ocean-currents-4: #82B6D9;
  --midnight-ocean-currents-5: #2A435B;
}

Tailwind config

theme: {
  extend: {
    colors: {
      "midnight-ocean-currents": {
        1: "#1A2C3D",
        2: "#3B5C7D",
        3: "#5E89AB",
        4: "#82B6D9",
        5: "#2A435B",
      }
    }
  }
}

Hex values

Color 1#1A2C3D

Color 2#3B5C7D

Color 3#5E89AB

Color 4#82B6D9

Color 5#2A435B

Accessibility

Contrast checker

2:1Fail

3.8:1AA18

6.6:1AA

1.4:1Fail

2:1Fail

1.9:1Fail

3.2:1AA18

1.5:1Fail

3.8:1AA18

1.9:1Fail

1.7:1Fail

2.7:1Fail

6.6:1AA

3.2:1AA18

1.7:1Fail

4.7:1AA

1.4:1Fail

1.5:1Fail

2.7:1Fail

4.7:1AA

Similar palettes

More like Midnight Ocean Currents

View all dark

Abyss Gaze

Abyssal Bioluminescence

Abyssal Bioluminescent Glow

Abyssal Coral Forms

Abyssal Coral Glow

Abyssal Depths