Palette

Tempest Wave Crash

Powerful and deep, this palette evokes the raw energy and dramatic beauty of a raging ocean tempest.

darkdark5 colors

More dark palettes

Preview

See it in context.

Interface

New

Ready when you are.

A quick look at how Tempest Wave Crash 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 Wave Crash.

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

Data visualization

#1A2A3A#3A5A6A#5A8A9A#8ABBCB#BBDDEE

Palette guide

How to use Tempest Wave Crash

Overview

The Tempest Wave Crash palette is powerful and deep, evoking the raw energy and dramatic beauty of a raging ocean tempest. Starting with the profound #1A2A3A, it dynamically moves through compelling blues like #3A5A6A and #5A8A9A, culminating in the vibrant #8ABBCB and the airy #BBDDEE. This collection is ideal for designers and developers seeking to convey intensity, motion, and a cool, dramatic aesthetic. Its versatile range of blues offers excellent opportunities for creating impactful visuals, from high-energy branding to immersive digital experiences, providing both depth and clarity in various design contexts.

Best used for

Action-oriented branding and marketing
Video game environments and UI
Sports and adventure related content
Dramatic editorial layouts
Web interfaces with a dynamic feel
Marine and oceanographic visualizations

Suggested color roles

primary

Utilize #1A2A3A as the deep, impactful primary color for backgrounds, large headers, or core branding, establishing a strong foundation.

secondary

Employ #3A5A6A for supportive sections, subheadings, or secondary navigation, providing strong visual continuity and depth.

accent

Apply #8ABBCB for vibrant, dynamic accents, interactive elements, or to simulate the spray of a wave, drawing immediate attention.

background

Use #BBDDEE as a light, airy background for main content, or #1A2A3A for an immersive, deep dark mode experience.

text

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

Accessibility notes

Ensure #BBDDEE text on #1A2A3A backgrounds meets WCAG AAA standards for optimal readability.
Be cautious when using #8ABBCB for small text on #5A8A9A; verify contrast ratios carefully.
For long-form content on light backgrounds, a dark charcoal provides better readability and a softer aesthetic than pure black.
Always check contrast for interactive elements and links, especially when using mid-range blues.

Recommended combinations

Crashing Contrast

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

#1A2A3A · #BBDDEE · #5A8A9A

Wave Motion

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

#3A5A6A · #5A8A9A · #8ABBCB

Foaming Spray

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

#1A2A3A · #8ABBCB · #3A5A6A

CSS variables

:root {
  --tempest-wave-crash-1: #1A2A3A;
  --tempest-wave-crash-2: #3A5A6A;
  --tempest-wave-crash-3: #5A8A9A;
  --tempest-wave-crash-4: #8ABBCB;
  --tempest-wave-crash-5: #BBDDEE;
}

Tailwind config

theme: {
  extend: {
    colors: {
      "tempest-wave-crash": {
        1: "#1A2A3A",
        2: "#3A5A6A",
        3: "#5A8A9A",
        4: "#8ABBCB",
        5: "#BBDDEE",
      }
    }
  }
}

Hex values

Color 1#1A2A3A

Color 2#3A5A6A

Color 3#5A8A9A

Color 4#8ABBCB

Color 5#BBDDEE

Accessibility

Contrast checker

2:1Fail

3.9:1AA18

7:1AA

10.2:1AAA

2:1Fail

1.9:1Fail

3.5:1AA18

5.2:1AA

3.9:1AA18

1.9:1Fail

1.8:1Fail

2.7:1Fail

7:1AA

3.5:1AA18

1.8:1Fail

1.5:1Fail

10.2:1AAA

5.2:1AA

2.7:1Fail

1.5:1Fail

Similar palettes

More like Tempest Wave Crash

Tempestuous Sea Depths

Tempestuous Sky Fury

Abyssal Storm Surge