Palette

Tempest Ocean Fury

Dramatic blues and grays capture the raw power and tumultuous beauty of a stormy, unpredictable ocean.

cooldark5 colors

More cool palettes

Preview

See it in context.

Interface

New

Ready when you are.

A quick look at how Tempest Ocean Fury 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 Ocean Fury.

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

Data visualization

#1C2E3B#3A5F7D#6A90B0#A0C4D9#D0E0E8

Palette guide

How to use Tempest Ocean Fury

Overview

The Tempest Ocean Fury palette vividly captures the raw power and tumultuous beauty of a stormy, unpredictable ocean. Anchored by the profound #1C2E3B, it flows through strong mid-blues like #3A5F7D and #6A90B0, culminating in the bright, foamy #A0C4D9 and #D0E0E8. This collection is ideal for designers and developers aiming to evoke drama, intensity, and a sense of untamed nature. Its range of cool, powerful blues offers exceptional depth and contrast, making it versatile for high-impact branding, dynamic digital interfaces, and evocative visual storytelling across various platforms.

Best used for

Adventure and outdoor brands
Maritime and naval themed projects
High-performance tech interfaces
Dramatic editorial content
Environmental and conservation initiatives
Sports and action-oriented branding

Suggested color roles

primary

Designate #1C2E3B as the commanding primary color for backgrounds, headers, or core branding, establishing a powerful foundation.

secondary

Utilize #3A5F7D for supportive sections, subheadings, or secondary navigation, providing strong visual continuity.

accent

Apply #A0C4D9 for energetic highlights, interactive elements, or to simulate the crest of a wave, drawing immediate attention.

background

Employ #D0E0E8 as a soft, airy background for main content, or #1C2E3B for an immersive, deep dark mode experience.

text

For dark backgrounds like #1C2E3B, use #D0E0E8 or a near-white. On lighter backgrounds such as #D0E0E8, use #1C2E3B or a dark charcoal for optimal contrast.

Accessibility notes

Ensure #D0E0E8 text on #1C2E3B backgrounds meets WCAG AAA standards for optimal readability.
Be cautious using #A0C4D9 on #6A90B0 for small text; verify contrast ratios carefully.
For long-form text on light backgrounds, a dark charcoal often provides better readability and a softer look than pure black.
Always check contrast for interactive elements and links, especially when using mid-range blues.

Recommended combinations

Deep Current

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

#1C2E3B · #D0E0E8 · #6A90B0

Wave Dynamics

Creates a dynamic, gradient-like flow, perfect for background animations, layered UI, or indicating progression.

#3A5F7D · #6A90B0 · #A0C4D9

Foamy Crest

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

#1C2E3B · #A0C4D9 · #3A5F7D

CSS variables

:root {
  --tempest-ocean-fury-1: #1C2E3B;
  --tempest-ocean-fury-2: #3A5F7D;
  --tempest-ocean-fury-3: #6A90B0;
  --tempest-ocean-fury-4: #A0C4D9;
  --tempest-ocean-fury-5: #D0E0E8;
}

Tailwind config

theme: {
  extend: {
    colors: {
      "tempest-ocean-fury": {
        1: "#1C2E3B",
        2: "#3A5F7D",
        3: "#6A90B0",
        4: "#A0C4D9",
        5: "#D0E0E8",
      }
    }
  }
}

Hex values

Color 1#1C2E3B

Color 2#3A5F7D

Color 3#6A90B0

Color 4#A0C4D9

Color 5#D0E0E8

Accessibility

Contrast checker

2.1:1Fail

4.1:1AA18

7.6:1AAA

10.3:1AAA

2.1:1Fail

2:1Fail

3.7:1AA18

5:1AA

4.1:1AA18

2:1Fail

1.8:1Fail

2.5:1Fail

7.6:1AAA

3.7:1AA18

1.8:1Fail

1.4:1Fail

10.3:1AAA

5:1AA

2.5:1Fail

1.4:1Fail

Similar palettes

More like Tempest Ocean Fury

View all cool

Coastal Tempest Gloom

Stormy Coast Drift

Stormy Coastal Bluff

Stormy Nordic Coast

Abyssal Bioluminescence

Abyssal Current Glide