Palette

Coastal Stone Haze

Cool greys and blues mimicking the soft hues of a foggy morning on a pebble beach.

neutralcalm5 colors

More neutral palettes

Preview

See it in context.

Interface

New

Ready when you are.

A quick look at how Coastal Stone Haze 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 Stone Haze.

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

Data visualization

#A9A9A9#708090#B0C4DE#E0FFFF#F0FFFF

Palette guide

How to use Coastal Stone Haze

Overview

The Coastal Stone Haze palette is a serene collection of cool grays and soft blues, perfectly mimicking the misty atmosphere of a foggy morning on a pebble beach. With versatile grays like #A9A9A9 and #708090, it provides a grounded, sophisticated base. The ethereal blues of #B0C4DE, #E0FFFF, and #F0FFFF introduce an airy, expansive quality, reminiscent of a vast, calm ocean. This harmonious blend is ideal for designers seeking to create a serene, minimalist, and subtly elegant aesthetic. It's especially suited for projects that aim to evoke clarity, tranquility, and a quiet, contemplative atmosphere, perfect for modern, understated branding.

Best used for

Minimalist architectural design portfolios
High-end tech product interfaces
Luxury hotel and spa branding
Abstract art and photography websites
Professional corporate websites
Winter apparel collections

Suggested color roles

primary

Utilize #B0C4DE as a dominant, calming blue for main sections or branding elements.

secondary

Employ #A9A9A9 for secondary content blocks, navigation, or subtle graphical elements, adding a neutral balance.

accent

Introduce #708090 as a deeper accent for highlights, icons, or strong textual elements.

background

Choose #F0FFFF or #E0FFFF for light, airy backgrounds, providing a clean, expansive canvas.

text

Use #708090 or #A9A9A9 for body text and headings for excellent readability against lighter palette colors, or a dark charcoal.

Accessibility notes

The darker #708090 and #A9A9A9 provide good contrast for text on #F0FFFF, #E0FFFF, and #B0C4DE.
Ensure sufficient contrast when using #F0FFFF or #E0FFFF for text on any background, as they are extremely light.
Avoid using #B0C4DE for text on #A9A9A9 backgrounds; opt for a darker color for text.
Check contrast ratios for all text pairings, especially for large blocks of content to ensure readability.

Recommended combinations

Misty Shore

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

#708090 · #A9A9A9 · #F0FFFF

Pebble Blue

Ideal for clean, minimalist interfaces with a soft blue, a light background, and strong dark text.

#B0C4DE · #E0FFFF · #708090

Haze Layers

Use for subtle visual layering, combining a cool grey with a very light background and a soft blue accent.

#A9A9A9 · #E0FFFF · #B0C4DE

CSS variables

:root {
  --coastal-stone-haze-1: #A9A9A9;
  --coastal-stone-haze-2: #708090;
  --coastal-stone-haze-3: #B0C4DE;
  --coastal-stone-haze-4: #E0FFFF;
  --coastal-stone-haze-5: #F0FFFF;
}

Tailwind config

theme: {
  extend: {
    colors: {
      "coastal-stone-haze": {
        1: "#A9A9A9",
        2: "#708090",
        3: "#B0C4DE",
        4: "#E0FFFF",
        5: "#F0FFFF",
      }
    }
  }
}

Hex values

Color 1#A9A9A9

Color 2#708090

Color 3#B0C4DE

Color 4#E0FFFF

Color 5#F0FFFF

Accessibility

Contrast checker

1.7:1Fail

1.3:1Fail

2.2:1Fail

2.3:1Fail

1.7:1Fail

2.3:1Fail

3.8:1AA18

3.9:1AA18

1.3:1Fail

2.3:1Fail

1.7:1Fail

2.2:1Fail

3.8:1AA18

1.7:1Fail

1:1Fail

2.3:1Fail

3.9:1AA18

1.7:1Fail

1:1Fail

Similar palettes

More like Coastal Stone Haze

Coastal Stone Haze

See it in context.

Ready when you are.

Built with Coastal Stone Haze.

How to use Coastal Stone Haze

Overview

Best used for

Suggested color roles

Accessibility notes

Recommended combinations

Misty Shore

Pebble Blue

Haze Layers

CSS variables

Tailwind config

Related searches

Hex values

Contrast checker

More like Coastal Stone Haze