Palette

Oceanic Abyss Gale

A dramatic palette reflecting the intensity of a stormy ocean, with dark, turbulent waters and foamy white caps.

darkdark5 colors

More dark palettes

Preview

See it in context.

Interface

New

Ready when you are.

A quick look at how Oceanic Abyss Gale 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 Oceanic Abyss Gale.

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

Data visualization

#0A1128#001F54#034078#0A5092#DBEBF5

Palette guide

How to use Oceanic Abyss Gale

Overview

The Oceanic Abyss Gale palette captures the dramatic intensity of a stormy ocean, blending deep, turbulent blues with a striking foamy white. This collection, featuring #0A1128, #001F54, and #0A5092, provides a powerful foundation for projects needing depth and contrast. Designers can leverage its cool, dark tones for sophisticated digital interfaces or branding that evokes mystery and strength. The bright #DBEBF5 offers a crucial highlight, simulating whitecaps against dark waters, ensuring visual interest and readability. Developers will find these hex codes ideal for creating impactful UI elements, dark mode themes, or dynamic data visualizations that stand out. Its overall mood is dark and profound, perfect for conveying seriousness and elegance.

Best used for

Dark mode UI designs
Marine or nautical brand identities
Website headers and hero sections
Dramatic digital illustrations
Event branding for serious topics
Environmental advocacy websites

Suggested color roles

primary

#0A1128 - Use this deepest navy as the dominant background for a truly abyssal, dark mode experience or for large structural elements.

secondary

#001F54 - Ideal for navigation bars, sub-headers, or card backgrounds to add subtle variation and depth without losing the dark theme.

accent

#0A5092 - A vibrant, stormy blue perfect for interactive elements, call-to-action buttons, or key informational highlights.

background

#0A1128 - Provides a strong, dark base for content, creating a sense of depth and focus.

text

#DBEBF5 - This near-white is excellent for primary text, ensuring high contrast and readability against all the dark blues.

Accessibility notes

Ensure #DBEBF5 text has sufficient contrast against all dark blues, especially #0A1128 and #001F54, for WCAG AA compliance.
Avoid using #001F54 text on #034078 backgrounds; the contrast will likely be too low.
Consider using a lighter shade of #DBEBF5 for very small text or icons if contrast is marginal.
For critical information, pair #DBEBF5 with the darkest colors like #0A1128 or #001F54.

Recommended combinations

Deep Ocean

A classic dark mode scheme, with the darkest blue as background, secondary for panels, and the light for text/icons.

#0A1128 · #001F54 · #DBEBF5

Stormy Waters

Use #034078 for main content blocks, #0A5092 for interactive elements, and #DBEBF5 for text.

#034078 · #0A5092 · #DBEBF5

Abyssal Depths

A strong contrast combination, #0A1128 for primary, #0A5092 for accents, and #DBEBF5 for key highlights.

#0A1128 · #0A5092 · #DBEBF5

CSS variables

:root {
  --oceanic-abyss-gale-1: #0A1128;
  --oceanic-abyss-gale-2: #001F54;
  --oceanic-abyss-gale-3: #034078;
  --oceanic-abyss-gale-4: #0A5092;
  --oceanic-abyss-gale-5: #DBEBF5;
}

Tailwind config

theme: {
  extend: {
    colors: {
      "oceanic-abyss-gale": {
        1: "#0A1128",
        2: "#001F54",
        3: "#034078",
        4: "#0A5092",
        5: "#DBEBF5",
      }
    }
  }
}

Hex values

Color 1#0A1128

Color 2#001F54

Color 3#034078

Color 4#0A5092

Color 5#DBEBF5

Accessibility

Contrast checker

1.2:1Fail

1.8:1Fail

2.3:1Fail

15.3:1AAA

1.2:1Fail

1.5:1Fail

1.9:1Fail

13:1AAA

1.8:1Fail

1.5:1Fail

1.3:1Fail

8.6:1AAA

2.3:1Fail

1.9:1Fail

1.3:1Fail

6.7:1AA

15.3:1AAA

13:1AAA

8.6:1AAA

6.7:1AA

Similar palettes

More like Oceanic Abyss Gale

Abyssal Bioluminescent Glow

Abyssal Coral Glow