Palette

Rocky Shore Mist

Muted greys and blues capture the serene, misty atmosphere of a rocky coastline at dawn.

neutralcalm5 colors

More neutral palettes

Preview

See it in context.

Interface

New

Ready when you are.

A quick look at how Rocky Shore Mist 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 Rocky Shore Mist.

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

Data visualization

#2F4F4F#5F7F7F#96AAB0#BBCBCF#E1E8EB

Palette guide

How to use Rocky Shore Mist

Overview

The Rocky Shore Mist palette is a serene collection of muted greys and blues, perfectly capturing the tranquil, misty atmosphere of a rocky coastline at dawn. Ranging from the deep #2F4F4F (Dark Slate Gray) to the airy #E1E8EB (Light Grayish Blue), this palette offers a calming and sophisticated aesthetic. Designers and developers can leverage these cool, understated tones to create minimalist, natural, and peaceful digital or physical environments. The mid-tones like #96AAB0 provide a gentle transition, making this palette ideal for projects aiming to evoke a sense of calm, clarity, and understated elegance, reminiscent of natural landscapes.

Best used for

Spa and wellness branding and websites
Minimalist web design and UI/UX
Nature photography portfolios
Calming interior design spaces
Coastal decor themes and products
Environmental and conservation initiatives

Suggested color roles

primary

#2F4F4F - A deep, muted bluish-grey, ideal for foundational elements, headers, or sophisticated backgrounds.

secondary

#5F7F7F - A softer, medium grey-blue, perfect for complementary sections, subheadings, or UI elements.

accent

#96AAB0 - A calming, light grey-blue, excellent for highlights, interactive elements, or subtle graphic details.

background

#E1E8EB - A very light, almost white, cool grey, providing an airy, expansive, and clean canvas.

text

#2F4F4F - The darkest shade ensures optimal readability for body text and headings against lighter backgrounds.

Accessibility notes

Ensure #2F4F4F text has strong contrast on #E1E8EB and #BBCBCF backgrounds for optimal readability.
Avoid using #96AAB0 or #BBCBCF for small text on #E1E8EB due to low contrast, which will hinder legibility.
Use the darkest shades, like #2F4F4F, for critical text to maintain readability across the palette.
For text on #2F4F4F backgrounds, use white or a very light grey for strong contrast and accessibility.

Recommended combinations

Misty Horizon

Creates a serene, expansive feel, suitable for hero sections, main content, and tranquil visuals.

#2F4F4F · #96AAB0 · #E1E8EB

Calm Waters

For a softer, more ethereal look, great for backgrounds, layered graphics, and subtle gradients.

#5F7F7F · #BBCBCF · #E1E8EB

Shoreline Depth

Layers the deeper and mid-tones for a sophisticated, grounded feel in branding and graphic design.

#2F4F4F · #5F7F7F · #96AAB0

CSS variables

:root {
  --rocky-shore-mist-1: #2F4F4F;
  --rocky-shore-mist-2: #5F7F7F;
  --rocky-shore-mist-3: #96AAB0;
  --rocky-shore-mist-4: #BBCBCF;
  --rocky-shore-mist-5: #E1E8EB;
}

Tailwind config

theme: {
  extend: {
    colors: {
      "rocky-shore-mist": {
        1: "#2F4F4F",
        2: "#5F7F7F",
        3: "#96AAB0",
        4: "#BBCBCF",
        5: "#E1E8EB",
      }
    }
  }
}

Hex values

Color 1#2F4F4F

Color 2#5F7F7F

Color 3#96AAB0

Color 4#BBCBCF

Color 5#E1E8EB

Accessibility

Contrast checker

2.1:1Fail

3.7:1AA18

5.3:1AA

7.2:1AAA

2.1:1Fail

1.8:1Fail

2.6:1Fail

3.5:1AA18