Palette

Tranquil Abyss Depths

Plunge into the serene, mysterious depths of the ocean, where sunlight rarely reaches the tranquil abyss.

coolcalm5 colors

More cool palettes

Preview

See it in context.

Interface

New

Ready when you are.

A quick look at how Tranquil Abyss Depths 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 Tranquil Abyss Depths.

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

Data visualization

#0B132B#1C2541#3A506B#5BC0EB#6FFFE9

Palette guide

How to use Tranquil Abyss Depths

Overview

The Tranquil Abyss Depths palette invites users into a world of serene, mysterious blues and teals, echoing the profound calm of the deep ocean. Ranging from the almost black #0B132B to the rich navy #1C2541, and through the soothing #3A506B to the luminous #5BC0EB and #6FFFE9, this palette is ideal for conveying professionalism, tranquility, and a touch of modern sophistication. Designers can use these cool, deep tones to create immersive and calming digital environments, perfect for projects that require a sense of depth, stability, and peaceful contemplation, with subtle hints of light.

Best used for

Corporate websites and tech branding
Meditation or wellness apps and platforms
Environmental or marine conservation organizations
Sleek, modern user interface designs
Science or educational content related to oceans
Digital art and illustrations needing a cool, deep mood

Suggested color roles

primary

Utilize #1C2541 as a strong, sophisticated primary for major headings, navigation, or corporate branding.

secondary

Employ #3A506B for supporting content, subheadings, or background panels, offering a mid-tone with depth.

accent

Apply #5BC0EB or #6FFFE9 for interactive elements, highlights, or notifications, creating a luminous, refreshing contrast.

background

Use #0B132B for a truly deep, immersive background, or #1C2541 for a slightly lighter, yet still profound, base.

text

White or a very light gray (e.g., #E0E0E0) is crucial for text on the darker shades to ensure excellent readability.

Accessibility notes

The lighter shades #5BC0EB and #6FFFE9 provide good contrast against the darkest colors like #0B132B and #1C2541.
Avoid using mid-tone blues like #3A506B for text on other similar mid-tones; ensure sufficient luminosity difference.
Ensure interactive elements using #5BC0EB or #6FFFE9 have adequate size and clear focus states for visibility.
Text on #0B132B or #1C2541 should always be light (white/light gray) to meet WCAG contrast requirements.

Recommended combinations

Deep Ocean

Creates an immersive, professional, and stable foundation, ideal for dark mode interfaces or sophisticated branding.

#0B132B · #1C2541 · #3A506B

Abyss Glimmer

Highlights elements with a refreshing, almost iridescent glow, perfect for interactive components or data visualization.

#3A506B · #5BC0EB · #6FFFE9

Tranquil Flow

Provides strong contrast and clarity, excellent for calls to action or emphasizing key information against a deep background.

#1C2541 · #5BC0EB · #0B132B

CSS variables

:root {
  --tranquil-abyss-depths-1: #0B132B;
  --tranquil-abyss-depths-2: #1C2541;
  --tranquil-abyss-depths-3: #3A506B;
  --tranquil-abyss-depths-4: #5BC0EB;
  --tranquil-abyss-depths-5: #6FFFE9;
}

Tailwind config

theme: {
  extend: {
    colors: {
      "tranquil-abyss-depths": {
        1: "#0B132B",
        2: "#1C2541",
        3: "#3A506B",
        4: "#5BC0EB",
        5: "#6FFFE9",
      }
    }
  }
}

Hex values

Color 1#0B132B

Color 2#1C2541

Color 3#3A506B

Color 4#5BC0EB

Color 5#6FFFE9

Accessibility

Contrast checker

1.2:1Fail

2.2:1Fail

8.9:1AAA

15:1AAA

1.2:1Fail

1.8:1Fail

7.3:1AAA

12.3:1AAA

2.2:1Fail

1.8:1Fail

4:1AA18

6.8:1AA

8.9:1AAA

7.3:1AAA

4:1AA18

1.7:1Fail

15:1AAA

12.3:1AAA

6.8:1AA

1.7:1Fail

Similar palettes

More like Tranquil Abyss Depths