Back to palettes

Palette

Tempest Sea Depths

Powerful and dramatic, reflecting the turbulent, dark blues and grays of a tempestuous sea.

cooldark5 colors
More cool palettes

Preview

See it in context.

Interface

New

Ready when you are.

A quick look at how Tempest Sea 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 Tempest Sea Depths.

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

Data visualization

#0A243D#2B4E6C#5E8CA6#8CC0D9#C8DCE8

Palette guide

How to use Tempest Sea Depths

Overview

The Tempest Sea Depths palette is a powerful and dramatic collection, reflecting the turbulent, dark blues and grays of a tempestuous sea. From the profound #0A243D, it ascends through rich tones like #2B4E6C and #5E8CA6, culminating in the serene #8CC0D9 and #C8DCE8. This palette is meticulously crafted for designers and developers seeking to convey depth, mystery, and sophisticated strength. Its cool, authoritative hues offer exceptional contrast and versatility, making it perfect for luxury branding, high-tech interfaces, and any project that benefits from a deep, immersive, and visually compelling color scheme.

Best used for

  • Luxury and high-end branding
  • Technology and marine research interfaces
  • Editorial layouts with a serious tone
  • App design and dark mode themes
  • Cinematic and dramatic digital art
  • Corporate websites seeking gravitas

Suggested color roles

primary

Utilize #0A243D as the profound primary color for backgrounds, headers, or core branding, establishing a deep and authoritative presence.

secondary

Employ #2B4E6C for supportive sections, subheadings, or secondary navigation, providing rich visual continuity.

accent

Apply #8CC0D9 for clear, bright accents, interactive elements, or to highlight key information with a touch of luminosity.

background

Use #C8DCE8 as a soft, light backdrop for main content, or #0A243D for an immersive, sophisticated dark mode experience.

text

For dark backgrounds like #0A243D, use #C8DCE8 or a near-white. On lighter backgrounds such as #C8DCE8, use #0A243D or a dark charcoal for optimal contrast.

Accessibility notes

  • Ensure #C8DCE8 text on #0A243D backgrounds meets WCAG AAA standards for optimal readability.
  • Be cautious when using #8CC0D9 for small text on #5E8CA6; verify contrast ratios carefully.
  • For long-form content on light backgrounds, a dark charcoal provides better readability and a softer aesthetic than pure black.
  • Always check contrast for interactive elements and links, especially when using mid-range blues.

Recommended combinations

Abyssal Contrast

A profound dark-light contrast with a strong mid-blue, excellent for creating clear hierarchy and visual impact in layouts.

#0A243D · #C8DCE8 · #5E8CA6

Oceanic Flow

Creates a smooth, gradient-like progression of blues, perfect for background animations, layered UI, or indicating depth.

#2B4E6C · #5E8CA6 · #8CC0D9

Bright Horizon

Combines the deepest tone with a bright accent and a rich mid-blue, ideal for highlighting features or creating a sense of distant light.

#0A243D · #8CC0D9 · #2B4E6C

CSS variables

:root {
  --tempest-sea-depths-1: #0A243D;
  --tempest-sea-depths-2: #2B4E6C;
  --tempest-sea-depths-3: #5E8CA6;
  --tempest-sea-depths-4: #8CC0D9;
  --tempest-sea-depths-5: #C8DCE8;
}

Tailwind config

theme: {
  extend: {
    colors: {
      "tempest-sea-depths": {
        1: "#0A243D",
        2: "#2B4E6C",
        3: "#5E8CA6",
        4: "#8CC0D9",
        5: "#C8DCE8",
      }
    }
  }
}

Related searches

deep blue ocean palettestormy sea color schemesophisticated blue brandingmarine tech UI themecool dark blue branding

Palette colors

Hex values

Color 1#0A243D
·
Color 2#2B4E6C
·
Color 3#5E8CA6
·
Color 4#8CC0D9
·
Color 5#C8DCE8
·

Accessibility

Contrast checker

1
2
3
4
5
1
1.8:1Fail
4.3:1AA18
8:1AAA
11.1:1AAA
2
1.8:1Fail
2.4:1Fail
4.4:1AA18
6.2:1AA
3
4.3:1AA18
2.4:1Fail
1.8:1Fail
2.6:1Fail
4
8:1AAA
4.4:1AA18
1.8:1Fail
1.4:1Fail
5
11.1:1AAA
6.2:1AA
2.6:1Fail
1.4:1Fail

Similar palettes

More like Tempest Sea Depths

View all cool
Stormy Coast Horizon
Coastal Tempest Gloom
Stormy Coast Drift
Stormy Horizon Drama
Bioluminescent Abyss
Cobalt Abyss Depths