Palette

Coastal Tempest Gloom

Dark, brooding grays and deep blues capture the powerful, raw energy of a wild coastal storm.

cooldark5 colors

More cool palettes

Preview

See it in context.

Interface

New

Ready when you are.

A quick look at how Coastal Tempest Gloom 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 Coastal Tempest Gloom.

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

Data visualization

#2A3A4A#4A6A7A#708A9A#9AAAB0#BFCACB

Palette guide

How to use Coastal Tempest Gloom

Overview

The Coastal Tempest Gloom palette is a powerful collection of deep grays and brooding blues, perfectly capturing the raw energy of a wild coastal storm. Ranging from the profound #2A3A4A to the mysterious #4A6A7A and the atmospheric #708A9A, this palette evokes a sense of drama and strength. The lighter #9AAAB0 and #BFCACB provide a subtle contrast, reminiscent of breaking waves or distant mist. This blend is ideal for designers seeking to create a moody, sophisticated, and impactful aesthetic. It's especially suited for projects that aim to convey resilience, depth, and a dramatic, contemplative atmosphere, perfect for powerful, modern branding.

Best used for

Gothic or dramatic fashion branding
Luxury automotive or tech websites
Mystery novel covers or film posters
High-end architectural photography
Dark mode interfaces for apps
Winter apparel collections

Suggested color roles

primary

Utilize #2A3A4A as a dominant, deep blue-gray for backgrounds or main branding elements, establishing a moody tone.

secondary

Employ #4A6A7A for secondary content blocks, navigation, or subtle graphical elements, adding depth.

accent

Introduce #708A9A as a lighter accent for highlights, icons, or subtle decorative touches.

background

Choose #2A3A4A for a dramatic, immersive background, or #4A6A7A for a slightly lighter, deep canvas.

text

Use #BFCACB or #9AAAB0 for body text and headings for excellent readability against darker palette colors, or crisp white.

Accessibility notes

The lighter shades #BFCACB and #9AAAB0 provide good contrast for text on #2A3A4A and #4A6A7A.
Ensure sufficient contrast when using #708A9A for text on #4A6A7A or #2A3A4A; a lighter text color is often better.
Avoid using #9AAAB0 for text on #BFCACB backgrounds; opt for a darker color for text.
White text on the darkest colors like #2A3A4A will offer optimal contrast and a striking effect.

Recommended combinations

Stormy Depths

Create a dramatic, deep-to-light gradient for headers, main content, and bright accents in web design.

#2A3A4A · #4A6A7A · #BFCACB

Misty Gloom

Ideal for dark mode interfaces with a light background, a soft mid-tone, and strong dark text.

#BFCACB · #9AAAB0 · #2A3A4A

Tempest Layers

Use for subtle visual layering, combining mid-tone blues and grays for depth and a lighter one for highlights.

#708A9A · #4A6A7A · #9AAAB0

CSS variables

:root {
  --coastal-tempest-gloom-1: #2A3A4A;
  --coastal-tempest-gloom-2: #4A6A7A;
  --coastal-tempest-gloom-3: #708A9A;
  --coastal-tempest-gloom-4: #9AAAB0;
  --coastal-tempest-gloom-5: #BFCACB;
}

Tailwind config

theme: {
  extend: {
    colors: {
      "coastal-tempest-gloom": {
        1: "#2A3A4A",
        2: "#4A6A7A",
        3: "#708A9A",
        4: "#9AAAB0",
        5: "#BFCACB",
      }
    }
  }
}

Hex values

Color 1#2A3A4A

Color 2#4A6A7A

Color 3#708A9A

Color 4#9AAAB0

Color 5#BFCACB

Accessibility

Contrast checker

2:1Fail

3.2:1AA18

4.9:1AA

6.9:1AA

2:1Fail

1.6:1Fail

2.4:1Fail

3.4:1AA18

3.2:1AA18

1.6:1Fail

1.5:1Fail

2.2:1Fail

4.9:1AA

2.4:1Fail

1.5:1Fail

1.4:1Fail

6.9:1AA

3.4:1AA18

2.2:1Fail

1.4:1Fail

Similar palettes

More like Coastal Tempest Gloom