Palette

Serene Ocean Depths

A tranquil journey into the deep sea, where cool blues meet mysterious shadows.

coolcalm5 colors

More cool palettes

Preview

See it in context.

Interface

New

Ready when you are.

A quick look at how Serene Ocean 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 Serene Ocean Depths.

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

Data visualization

#0A0A2A#1C2E4A#3A5B7F#6F9AC5#B1D1E6

Palette guide

How to use Serene Ocean Depths

Overview

The Serene Ocean Depths palette offers a captivating journey into cool, tranquil blues, perfect for evoking a sense of calm and mystery. Anchored by the profound `#0A0A2A`, it transitions through the rich `#1C2E4A` and balanced `#3A5B7F` to the lighter, airy `#6F9AC5` and serene `#B1D1E6`. This collection provides a versatile range for creating interfaces that feel both deep and refreshing. Designers and developers can leverage its gradient potential to build immersive digital experiences, from corporate branding to meditative applications, ensuring a sophisticated and calming visual narrative.

Best used for

Luxury brand websites and apps
Meditation and wellness platforms
Marine and environmental organizations
High-tech corporate identity
Elegant editorial layouts
Travel and resort marketing

Suggested color roles

primary

Use the deep, almost black `#0A0A2A` for strong foundations, navigation, or powerful brand statements.

secondary

The rich blue `#1C2E4A` is ideal for supporting elements, secondary headings, or large content blocks.

accent

Apply the mid-tone `#6F9AC5` for interactive elements, call-to-action buttons, or subtle highlights that draw attention.

background

The lightest shade, `#B1D1E6`, creates a clean, expansive background, perfect for readability and an open feel.

text

For body text, consider using `#3A5B7F` for good contrast on lighter backgrounds, or a near-white on darker blues like `#0A0A2A`.

Accessibility notes

Ensure sufficient contrast when using lighter blues like `#B1D1E6` for text on backgrounds; dark text is often necessary.
Verify that `#6F9AC5` provides enough contrast when used for text against `#B1D1E6` or `#E0FFFF` (a pure white).
The darkest shades, `#0A0A2A` and `#1C2E4A`, offer excellent contrast for light text, improving readability.
Avoid using similar mid-tones for text and background without careful contrast checking to prevent eye strain.

Recommended combinations

Deep Tranquility

For a strong, contrasting look; use `#0A0A2A` for structure, `#1C2E4A` for details, and `#B1D1E6` for text/highlights.

#0A0A2A · #1C2E4A · #B1D1E6

Ocean Current

A harmonious blend of mid-tones; great for content sections where `#3A5B7F` provides depth and `#6F9AC5` offers gentle interaction.

#3A5B7F · #6F9AC5 · #0A0A2A

Misty Horizon

Creates an airy, layered effect; ideal for backgrounds with soft accents and readable darker text.

#B1D1E6 · #6F9AC5 · #1C2E4A

CSS variables

:root {
  --serene-ocean-depths-1: #0A0A2A;
  --serene-ocean-depths-2: #1C2E4A;
  --serene-ocean-depths-3: #3A5B7F;
  --serene-ocean-depths-4: #6F9AC5;
  --serene-ocean-depths-5: #B1D1E6;
}

Tailwind config

theme: {
  extend: {
    colors: {
      "serene-ocean-depths": {
        1: "#0A0A2A",
        2: "#1C2E4A",
        3: "#3A5B7F",
        4: "#6F9AC5",
        5: "#B1D1E6",
      }
    }
  }
}

Hex values

Color 1#0A0A2A

Color 2#1C2E4A

Color 3#3A5B7F

Color 4#6F9AC5

Color 5#B1D1E6

Accessibility

Contrast checker

1.4:1Fail

2.7:1Fail

6.5:1AA

12.1:1AAA

1.4:1Fail

1.9:1Fail

4.6:1AA

8.5:1AAA

2.7:1Fail

1.9:1Fail

2.4:1Fail

4.4:1AA18

6.5:1AA

4.6:1AA

2.4:1Fail

1.8:1Fail

12.1:1AAA

8.5:1AAA

4.4:1AA18

1.8:1Fail

Similar palettes

More like Serene Ocean Depths

View all cool

Azure Abyss Calm

Indigo Reef Current

Tranquil Abyss Depths

Abyssal Blue Descent

Azure Canopy Light

Azure Lagoon Drift