Back to palettes

Palette

Coastal Stone Hearth

Grounded and calming, reflecting the muted tones of weathered stones along a tranquil coastline.

neutralcalm5 colors
More neutral palettes

Preview

See it in context.

Interface

New

Ready when you are.

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

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

Data visualization

#A9A9A9#778899#B0C4DE#DCDCDC#5F9EA0

Palette guide

How to use Coastal Stone Hearth

Overview

The Coastal Stone Hearth palette is a grounded and calming collection of muted grays and soft blues, reflecting the worn stones found along a tranquil coastline. With versatile grays like #A9A9A9, #778899, and #DCDCDC, it provides a sophisticated, stable base. The serene #B0C4DE introduces a calming blue, while #5F9EA0 offers a unique, deep blue-green accent. This harmonious blend is ideal for designers seeking to create a tranquil, minimalist, and subtly elegant aesthetic. It's especially suited for projects that aim to evoke clarity, peace, and a quiet, contemplative atmosphere, perfect for modern, understated branding with a touch of nature.

Best used for

  • Minimalist corporate branding
  • Architectural and interior design firms
  • High-end tech product interfaces
  • Luxury spa and wellness websites
  • Professional services marketing
  • Abstract art and photography portfolios

Suggested color roles

primary

Utilize #A9A9A9 as a dominant, calming gray for main sections or branding elements.

secondary

Employ #B0C4DE for secondary content blocks, navigation, or subtle graphical elements, adding a cool contrast.

accent

Introduce #5F9EA0 as a unique deep blue-green accent for highlights, icons, or strong call-to-actions.

background

Choose #DCDCDC for a light, clean background, or #B0C4DE for a slightly more saturated yet soft canvas.

text

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

Accessibility notes

  • The darker #778899 and #5F9EA0 provide excellent contrast for text on #DCDCDC and #B0C4DE.
  • Ensure sufficient contrast when using #DCDCDC for text on any background, as it is very 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

Stone & Sea

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

#778899 · #A9A9A9 · #B0C4DE

Hearth Glow

Ideal for clean, minimalist interfaces with a light background, a striking blue-green accent, and strong dark text.

#DCDCDC · #5F9EA0 · #778899

Muted Coastal

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

#A9A9A9 · #B0C4DE · #DCDCDC

CSS variables

:root {
  --coastal-stone-hearth-1: #A9A9A9;
  --coastal-stone-hearth-2: #778899;
  --coastal-stone-hearth-3: #B0C4DE;
  --coastal-stone-hearth-4: #DCDCDC;
  --coastal-stone-hearth-5: #5F9EA0;
}

Tailwind config

theme: {
  extend: {
    colors: {
      "coastal-stone-hearth": {
        1: "#A9A9A9",
        2: "#778899",
        3: "#B0C4DE",
        4: "#DCDCDC",
        5: "#5F9EA0",
      }
    }
  }
}

Related searches

neutral grey blue palettecoastal stone colorscalm minimalist designserene oceanic tonesunderstated earthy palette

Palette colors

Hex values

Color 1#A9A9A9
·
Color 2#778899
·
Color 3#B0C4DE
·
Color 4#DCDCDC
·
Color 5#5F9EA0
·

Accessibility

Contrast checker

1
2
3
4
5
1
1.5:1Fail
1.3:1Fail
1.7:1Fail
1.3:1Fail
2
1.5:1Fail
2:1Fail
2.7:1Fail
1.2:1Fail
3
1.3:1Fail
2:1Fail
1.3:1Fail
1.7:1Fail
4
1.7:1Fail
2.7:1Fail
1.3:1Fail
2.2:1Fail
5
1.3:1Fail
1.2:1Fail
1.7:1Fail
2.2:1Fail

Similar palettes

More like Coastal Stone Hearth

View all neutral