Palette

Stormy Ocean Gale

A powerful composition capturing the formidable essence of a turbulent ocean during a mighty storm.

cooldark5 colors

More cool palettes

Preview

See it in context.

Interface

New

Ready when you are.

A quick look at how Stormy Ocean 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 Stormy Ocean Gale.

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

Data visualization

#1B263B#0D47A1#4A6B8B#8DAAC0#C5D6E0

Palette guide

How to use Stormy Ocean Gale

Overview

The Stormy Ocean Gale palette delivers a powerful and dramatic composition, capturing the formidable essence of a turbulent ocean during a mighty storm. This collection spans from the deep, anchoring navy of #1B263B to the expansive, airy light blue-grey of #C5D6E0. A vibrant, deep blue, #0D47A1, provides a striking contrast and focal point, while #4A6B8B and #8DAAC0 offer versatile mid-tones that bridge the dark and light elements. Ideal for designers and developers aiming for a strong, impactful, and dynamic aesthetic, these hex codes are perfect for creating compelling branding, immersive digital experiences, or visual narratives that evoke strength and natural power.

Best used for

Maritime industry websites
Adventure travel blogs
Action game UI
Outdoor apparel branding
Storm tracking applications
Dramatic nature photography showcases

Suggested color roles

primary

Utilize #1B263B as the deep, anchoring color for headers, navigation, or strong brand elements, providing a powerful foundation.

secondary

Apply #4A6B8B for supporting sections, subheadings, or as a background for content blocks, offering a balanced mid-tone.

accent

Introduce #0D47A1 as a vibrant accent for call-to-action buttons, key data points, or interactive elements to create dynamic contrast.

background

Employ #C5D6E0 for clean, expansive page backgrounds, providing a light, airy canvas that allows darker elements to pop.

text

Use a dark text like #1B263B or a very dark grey for body copy on #C5D6E0 backgrounds. For dark backgrounds, a crisp white is essential.

Accessibility notes

Ensure #1B263B text on #C5D6E0 backgrounds meets WCAG AA contrast standards for readability.
Verify that #0D47A1 text or interactive elements have sufficient contrast against their chosen background.
Avoid using #4A6B8B for small text on #8DAAC0, as contrast may be insufficient for accessibility.
Prioritize high contrast for all critical information, especially against the lighter shades in this palette.

Recommended combinations

Dynamic Contrast

For high impact: #1B263B for primary, #C5D6E0 for backgrounds, and #0D47A1 for striking accents/CTAs.

#1B263B · #C5D6E0 · #0D47A1

Misty Layers

Ideal for subtle layering in UI components or gradients, creating depth with a lighter feel.

#4A6B8B · #8DAAC0 · #C5D6E0

Deep & Bright

Use #0D47A1 for vibrant elements, #C5D6E0 for clean backgrounds, and #1B263B for strong text or borders.

#0D47A1 · #C5D6E0 · #1B263B

CSS variables

:root {
  --stormy-ocean-gale-1: #1B263B;
  --stormy-ocean-gale-2: #0D47A1;
  --stormy-ocean-gale-3: #4A6B8B;
  --stormy-ocean-gale-4: #8DAAC0;
  --stormy-ocean-gale-5: #C5D6E0;
}

Tailwind config

theme: {
  extend: {
    colors: {
      "stormy-ocean-gale": {
        1: "#1B263B",
        2: "#0D47A1",
        3: "#4A6B8B",
        4: "#8DAAC0",
        5: "#C5D6E0",
      }
    }
  }
}

Hex values

Color 1#1B263B

Color 2#0D47A1

Color 3#4A6B8B

Color 4#8DAAC0

Color 5#C5D6E0

Accessibility

Contrast checker

1.8:1Fail

2.7:1Fail

6.2:1AA

10.1:1AAA

1.8:1Fail

1.5:1Fail

3.6:1AA18

5.8:1AA

2.7:1Fail

1.5:1Fail

2.3:1Fail

3.7:1AA18

6.2:1AA

3.6:1AA18

2.3:1Fail

1.6:1Fail

10.1:1AAA

5.8:1AA

3.7:1AA18

1.6:1Fail

Similar palettes

More like Stormy Ocean Gale

View all cool

Abyssal Current Glide

Bioluminescent Abyss

Cobalt Abyss Depths

Deep Ocean Currents

Midnight Ocean Trench

Oceanic Storm Surge