Palette

Abyssal Storm Surge

Depicts the powerful, enigmatic depths of the ocean during a tumultuous, moonless storm.

darkdark5 colors

More dark palettes

Preview

See it in context.

Interface

New

Ready when you are.

A quick look at how Abyssal Storm Surge 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 Abyssal Storm Surge.

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

Data visualization

#0A1128#001F54#034078#1282A2#8BBEC7

Palette guide

How to use Abyssal Storm Surge

Overview

The Abyssal Storm Surge palette depicts the powerful, enigmatic depths of the ocean during a tumultuous, moonless storm. This dark and dramatic collection features a gradient of deep blues, from the profound #0A1128 (Dark Sapphire) and #001F54 (Prussian Blue) to the intense #034078 (Navy Blue) and the more dynamic #1282A2 (Dark Cyan), culminating in the stormy #8BBEC7 (Light Blue Grey). Designers can leverage this palette to evoke a sense of power, mystery, and dramatic tension, perfect for cinematic themes, action-oriented gaming, or impactful branding. Developers will find these blues excellent for establishing visual hierarchy in dark mode, creating immersive backgrounds, and building an authoritative yet intriguing aesthetic that speaks to raw elemental force.

Best used for

Stormy ocean themed games
Dramatic film color grading
Intense dark mode UI/UX
Weather or marine tech branding
Adventure game environments
Powerful digital art and illustration

Suggested color roles

primary

#0A1128 (Dark Sapphire) - The deepest shade, ideal for main backgrounds, navigation bars, and primary content containers, conveying profound depth.

secondary

#001F54 (Prussian Blue) - A slightly lighter, yet still deep, blue for secondary panels, card backgrounds, or subtle dividing lines.

accent

#1282A2 (Dark Cyan) - This vibrant blue serves as a striking accent for interactive elements, hover states, or to highlight key data points with dynamic energy.

background

#0A1128 (Dark Sapphire) - Creates an immersive, stormy dark background, allowing lighter elements to shimmer like distant lightning.

text

White (#FFFFFF) or a very light grey (#F0F0F0) provides optimal contrast for readability against the dark blues. #1282A2 can be used for glowing headlines.

Accessibility notes

Ensure all text on the darkest backgrounds (#0A1128, #001F54) uses white or very light grey for high contrast.
The lighter blues like #8BBEC7 can be used for text on the deepest blues, but always verify WCAG compliance.
Avoid using mid-tones like #034078 for small text elements on dark backgrounds, as contrast may be insufficient.
Use #1282A2 strategically for critical interactive elements to ensure they stand out clearly against the deep blues.

Recommended combinations

Storm Depths

Excellent for layered dark backgrounds, deep content containers, or establishing a strong, mysterious base in dark themes.

#0A1128 · #001F54 · #034078

Surge Highlight

Ideal for highlighting active states, data visualizations, or creating a dynamic, energetic glow in UI components.

#001F54 · #1282A2 · #8BBEC7

Abyssal Current

Perfect for smooth background transitions, hero sections, or digital art that needs to convey profound depth and dramatic movement.

#0A1128 · #034078 · #1282A2

CSS variables

:root {
  --abyssal-storm-surge-1: #0A1128;
  --abyssal-storm-surge-2: #001F54;
  --abyssal-storm-surge-3: #034078;
  --abyssal-storm-surge-4: #1282A2;
  --abyssal-storm-surge-5: #8BBEC7;
}

Tailwind config

theme: {
  extend: {
    colors: {
      "abyssal-storm-surge": {
        1: "#0A1128",
        2: "#001F54",
        3: "#034078",
        4: "#1282A2",
        5: "#8BBEC7",
      }
    }
  }
}

Hex values

Color 1#0A1128

Color 2#001F54

Color 3#034078

Color 4#1282A2

Color 5#8BBEC7

Accessibility

Contrast checker

1.2:1Fail

1.8:1Fail

4.2:1AA18

9.2:1AAA

1.2:1Fail

1.5:1Fail

3.6:1AA18

7.8:1AAA

1.8:1Fail

1.5:1Fail

2.4:1Fail

5.1:1AA

4.2:1AA18

3.6:1AA18

2.4:1Fail

2.2:1Fail

9.2:1AAA

7.8:1AAA

5.1:1AA

2.2:1Fail

Similar palettes

More like Abyssal Storm Surge

View all dark

Abyssal Deep Current

Abyssal Midnight Reef

Abyssal Trench Mystery

Celestial Ocean Depth

Deep Abyss Current

Deep Cobalt Plunge