Back to palettes

Palette

Oceanic Storm Surge

Powerful blues and greys depicting the raw, untamed energy and tumultuous beauty of a stormy ocean.

cooldark5 colors
More cool palettes

Preview

See it in context.

Interface

New

Ready when you are.

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

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

Data visualization

#1A4A6B#3A6C8C#6A9EB8#0F2D44#4B7D99

Palette guide

How to use Oceanic Storm Surge

Overview

The Oceanic Storm Surge palette captures the raw power and depth of a tumultuous sea, offering a sophisticated range of cool blues and desaturated tones. Anchored by the profound #0F2D44, this palette builds intensity through the rich #1A4A6B and the versatile #3A6C8C. Lighter shades like #6A9EB8 provide contrast and breathability, while #4B7D99 introduces a muted, stormy grey-blue. Ideal for projects seeking a serious, reliable, or dramatic aesthetic, it evokes feelings of strength, tranquility, and a touch of wild nature. Designers can leverage its depth for impactful branding, digital interfaces, or compelling visual storytelling, ensuring a cohesive and professional appearance across various mediums.

Best used for

  • Corporate websites and branding for finance or tech
  • Environmental or oceanographic research platforms
  • Luxury product packaging with a sophisticated edge
  • Mobile app interfaces requiring a clean, professional look
  • Editorial design for articles on serious topics
  • Theatrical or film poster design for dramatic themes

Suggested color roles

primary

#1A4A6B - Use as the dominant brand color or for key UI elements like main headers and buttons, conveying stability and depth.

secondary

#3A6C8C - Ideal for subheadings, secondary calls-to-action, or feature boxes, providing visual interest without overpowering the primary.

accent

#6A9EB8 - Reserve this lighter tone for highlights, interactive states (hover/active), or subtle graphical elements to add a refreshing lift.

background

#0F2D44 - A deep, immersive background for dark mode interfaces, large hero sections, or to establish a mood of sophistication and calm.

text

A near-white or light grey like #E0E0E0 for optimal readability against the darker palette colors, especially #0F2D44 and #1A4A6B. Alternatively, use a very dark blue from the palette, like #0F2D44, on a very light background if needed.

Accessibility notes

  • Ensure sufficient contrast when pairing lighter colors like #6A9EB8 with darker text, or vice-versa, to meet WCAG AA standards.
  • Text set in #0F2D44 or #1A4A6B will require very light text (e.g., white or near-white) for readability, especially for body copy.
  • Use #6A9EB8 sparingly for small text elements, as its lightness might require larger font sizes or bolder weights to pass accessibility checks.
  • Test color combinations like #3A6C8C on #0F2D44 for button text or interactive elements to ensure clear distinction and usability.

Recommended combinations

Deep Ocean

Ideal for establishing a serious, professional tone in corporate dashboards or sophisticated branding.

#0F2D44 · #1A4A6B · #4B7D99

Stormy Horizon

Effective for highlighting key information or creating visual hierarchy in reports and presentations.

#6A9EB8 · #3A6C8C · #1A4A6B

Muted Depths

Great for subtle background patterns, secondary content areas, or elegant design elements that need to recede slightly.

#4B7D99 · #0F2D44 · #3A6C8C

CSS variables

:root {
  --oceanic-storm-surge-1: #1A4A6B;
  --oceanic-storm-surge-2: #3A6C8C;
  --oceanic-storm-surge-3: #6A9EB8;
  --oceanic-storm-surge-4: #0F2D44;
  --oceanic-storm-surge-5: #4B7D99;
}

Tailwind config

theme: {
  extend: {
    colors: {
      "oceanic-storm-surge": {
        1: "#1A4A6B",
        2: "#3A6C8C",
        3: "#6A9EB8",
        4: "#0F2D44",
        5: "#4B7D99",
      }
    }
  }
}

Related searches

deep blue color schemestormy ocean palettecool blue shades for webcorporate dark blue colorsprofessional blue grey palette

Palette colors

Hex values

Color 1#1A4A6B
·
Color 2#3A6C8C
·
Color 3#6A9EB8
·
Color 4#0F2D44
·
Color 5#4B7D99
·

Accessibility

Contrast checker

1
2
3
4
5
1
1.7:1Fail
3.2:1AA18
1.5:1Fail
2.1:1Fail
2
1.7:1Fail
1.9:1Fail
2.5:1Fail
1.3:1Fail
3
3.2:1AA18
1.9:1Fail
4.9:1AA
1.5:1Fail
4
1.5:1Fail
2.5:1Fail
4.9:1AA
3.2:1AA18
5
2.1:1Fail
1.3:1Fail
1.5:1Fail
3.2:1AA18

Similar palettes

More like Oceanic Storm Surge

View all cool
Tempest Cloud Waters
Abyssal Bioluminescence
Abyssal Current Glide
Arctic Ocean Depths
Bioluminescent Abyss
Coastal Tempest Gloom