Back to palettes

Palette

Tempest Cloud Waters

Captures the brooding, deep blues and greys of a vast ocean under a stormy, clouded sky.

cooldark5 colors
More cool palettes

Preview

See it in context.

Interface

New

Ready when you are.

A quick look at how Tempest Cloud Waters 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 Cloud Waters.

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

Data visualization

#2F4F4F#4682B4#708090#6A5ACD#191970

Palette guide

How to use Tempest Cloud Waters

Overview

The Tempest Cloud Waters palette delves into the deep, brooding blues and grays of a vast ocean under a stormy sky, offering a truly immersive and dramatic experience. Featuring profound hues like the intense #191970 and the rich #2F4F4F, it introduces the striking steel blue of #4682B4 and a unique accent in #6A5ACD. This palette is perfect for designers and developers aiming to evoke feelings of mystery, power, and depth. Its cool, intense tones are excellent for creating high-impact visuals, from digital interfaces to artistic compositions, providing a strong foundation for storytelling and compelling user experiences.

Best used for

  • Nautical and maritime branding
  • Game design and fantasy environments
  • Digital art and illustration
  • High-tech security interfaces
  • Editorial design with a dramatic flair
  • Abstract and moody web backgrounds

Suggested color roles

primary

Designate #191970 as the core deep blue for main backgrounds, navigation, or strong branding elements, conveying authority.

secondary

Use #2F4F4F for supportive sections, sidebars, or as a contrasting dark tone, adding textural depth.

accent

Highlight with #6A5ACD for impactful call-to-action buttons, vibrant links, or critical alerts, ensuring it stands out.

background

Employ #708090 for a lighter, atmospheric background, or #191970 for a truly deep, dark mode interface.

text

For dark backgrounds like #191970 or #2F4F4F, use a near-white or #708090 for readability. On lighter backgrounds, use #191970 or a dark charcoal.

Accessibility notes

  • Ensure near-white text on #191970 and #2F4F4F backgrounds meets WCAG AAA contrast standards.
  • The vibrant #6A5ACD needs careful pairing; avoid placing it on #4682B4 for small text due to potential low contrast.
  • Use #708090 cautiously as a text color on mid-tones; it may require larger font sizes for readability.
  • Always test accent color combinations to ensure they are discernible for all users.

Recommended combinations

Deep Ocean

Combines the deepest blue with a vibrant steel blue and a dark grey-green, ideal for creating rich, layered ocean scenes.

#191970 · #4682B4 · #2F4F4F

Stormy Accent

Pairs a dark base with a striking accent and a mid-grey, perfect for highlighting key interactive elements against a moody backdrop.

#2F4F4F · #6A5ACD · #708090

Watery Gradients

Creates a dynamic blend of blues and grey, suitable for background gradients, data visualizations, or abstract designs.

#4682B4 · #708090 · #191970

CSS variables

:root {
  --tempest-cloud-waters-1: #2F4F4F;
  --tempest-cloud-waters-2: #4682B4;
  --tempest-cloud-waters-3: #708090;
  --tempest-cloud-waters-4: #6A5ACD;
  --tempest-cloud-waters-5: #191970;
}

Tailwind config

theme: {
  extend: {
    colors: {
      "tempest-cloud-waters": {
        1: "#2F4F4F",
        2: "#4682B4",
        3: "#708090",
        4: "#6A5ACD",
        5: "#191970",
      }
    }
  }
}

Related searches

deep ocean color schemestormy blue grey palettenautical design hex codesdark moody blue accentsmysterious water hues

Palette colors

Hex values

Color 1#2F4F4F
·
Color 2#4682B4
·
Color 3#708090
·
Color 4#6A5ACD
·
Color 5#191970
·

Accessibility

Contrast checker

1
2
3
4
5
1
2.2:1Fail
2.2:1Fail
1.7:1Fail
1.7:1Fail
2
2.2:1Fail
1:1Fail
1.3:1Fail
3.6:1AA18
3
2.2:1Fail
1:1Fail
1.3:1Fail
3.7:1AA18
4
1.7:1Fail
1.3:1Fail
1.3:1Fail
2.8:1Fail
5
1.7:1Fail
3.6:1AA18
3.7:1AA18
2.8:1Fail

Similar palettes

More like Tempest Cloud Waters

View all cool
Oceanic Storm Surge
Abyssal Bioluminescence
Abyssal Current Glide
Arctic Ocean Depths
Bioluminescent Abyss
Coastal Tempest Gloom