Palette

Stormy Coastal Bluff

Grays and muted blues reflecting rugged coastal cliffs and a turbulent, overcast sea.

cooldark5 colors

More cool palettes

Preview

See it in context.

Interface

New

Ready when you are.

A quick look at how Stormy Coastal Bluff 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 Coastal Bluff.

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

Data visualization

#5A6D7D#8D99A6#C7D0D5#3C4A57#6B7C8F

Palette guide

How to use Stormy Coastal Bluff

Overview

The Stormy Coastal Bluff palette evokes the dramatic beauty of a rugged coastline under an overcast sky. Featuring deep, muted blues and grays like #3C4A57 and #5A6D7D, alongside lighter, atmospheric tones such as #C7D0D5, this collection is ideal for projects requiring a sophisticated, natural, and slightly melancholic aesthetic. Designers and developers will find these shades versatile for creating depth and mood, perfect for UI elements, branding, or digital art that aims for a serene yet powerful presence. The mid-tones like #6B7C8F and #8D99A6 offer excellent transition colors.

Best used for

Nature-inspired branding
UI for weather apps or outdoor gear
Editorial design with a serious tone
Architectural visualizations
Photography portfolios
Digital art and illustrations

Suggested color roles

primary

#3C4A57 - Use as a dominant dark foundation for headers, strong backgrounds, or main structural elements, providing significant depth.

secondary

#5A6D7D - Excellent for subheadings, secondary sections, or interactive elements, offering a slightly lighter, cooler contrast to the primary.

accent

#C7D0D5 - A soft, ethereal accent for highlights, hover states, or subtle graphic details, providing a touch of light.

background

#8D99A6 - A calming, neutral background for content areas, ensuring readability and a cohesive visual flow.

text

#3C4A57 - For primary body text on light backgrounds like #C7D0D5 or a near-white, or use a light gray like #C7D0D5 for text on dark backgrounds.

Accessibility notes

Ensure sufficient contrast between #3C4A57 text and #C7D0D5 background for WCAG AA compliance.
#8D99A6 may require darker text (e.g., #3C4A57) or lighter text (e.g., white) depending on its role.
Avoid using #C7D0D5 text on #8D99A6 background for small text, as contrast might be insufficient.
Always test color pairs with a contrast checker, especially for interactive elements.

Recommended combinations

Deep Contrast

High-impact combination for headers and key information, with #5A6D7D as a supporting element.

#3C4A57 · #C7D0D5 · #5A6D7D

Muted Harmony

Soft, cohesive trio for backgrounds, secondary elements, and subtle highlights, fostering tranquility.

#8D99A6 · #6B7C8F · #C7D0D5

Earthy Depth

Robust grouping for sophisticated interfaces or branding, balancing deep tones with a softer mid-gray.

#5A6D7D · #3C4A57 · #8D99A6

CSS variables

:root {
  --stormy-coastal-bluff-1: #5A6D7D;
  --stormy-coastal-bluff-2: #8D99A6;
  --stormy-coastal-bluff-3: #C7D0D5;
  --stormy-coastal-bluff-4: #3C4A57;
  --stormy-coastal-bluff-5: #6B7C8F;
}

Tailwind config

theme: {
  extend: {
    colors: {
      "stormy-coastal-bluff": {
        1: "#5A6D7D",
        2: "#8D99A6",
        3: "#C7D0D5",
        4: "#3C4A57",
        5: "#6B7C8F",
      }
    }
  }
}

Hex values

Color 1#5A6D7D

Color 2#8D99A6

Color 3#C7D0D5

Color 4#3C4A57

Color 5#6B7C8F

Accessibility

Contrast checker

1.8:1Fail

3.4:1AA18

1.7:1Fail

1.3:1Fail

1.8:1Fail

1.9:1Fail

3.1:1AA18

1.5:1Fail

3.4:1AA18

1.9:1Fail

5.8:1AA

2.7:1Fail

1.7:1Fail

3.1:1AA18

5.8:1AA

2.1:1Fail

1.3:1Fail

1.5:1Fail

2.7:1Fail

2.1:1Fail

Similar palettes

More like Stormy Coastal Bluff

View all cool

Coastal Tempest Gloom