Back to palettes

Palette

Coastal Stone Hearth

Soft, comforting blues and greys, like the worn stones of a cozy hearth in a coastal home.

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

#6C7D8B#8CA0AE#ABBEC9#D0DDE5#F2F5F7

Palette guide

How to use Coastal Stone Hearth

Overview

The Coastal Stone Hearth palette (version 2) is a comforting collection of soft blues and grays, reminiscent of weathered stones in a cozy coastal home. Ranging from the deep, grounding #6C7D8B to the serene #8CA0AE and the airy #ABBEC9, this palette evokes a profound sense of tranquility. The lightest #D0DDE5 and #F2F5F7 provide clean, expansive canvases, perfect for creating a welcoming atmosphere. This harmonious blend is ideal for designers seeking to create inviting, calm, and sophisticated aesthetics, well-suited for projects that aim to convey comfort, timelessness, and a quiet, contemplative atmosphere of a seaside retreat.

Best used for

  • Interior design for cozy homes
  • Luxury bed and bath linen branding
  • Craft and artisan product websites
  • Coffee shop or bakery branding
  • Mindfulness app interfaces
  • Ceramics and pottery collections

Suggested color roles

primary

Utilize #8CA0AE as a dominant, calming blue-gray for main sections or branding elements.

secondary

Employ #ABBEC9 for secondary content blocks, navigation, or subtle graphical elements, adding lightness.

accent

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

background

Choose #F2F5F7 or #D0DDE5 for light, airy backgrounds, providing a clean, expansive canvas.

text

Use #6C7D8B or #8CA0AE for body text and headings for excellent readability against lighter palette colors.

Accessibility notes

  • The darker #6C7D8B and #8CA0AE provide excellent contrast for text on #F2F5F7, #D0DDE5, and #ABBEC9.
  • Ensure sufficient contrast when using #F2F5F7 for text on any background, as it is extremely light.
  • Avoid using #D0DDE5 for text on #ABBEC9 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

Hearthstone Depth

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

#6C7D8B · #8CA0AE · #F2F5F7

Cozy Shore

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

#F2F5F7 · #D0DDE5 · #6C7D8B

Stone Layers

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

#ABBEC9 · #8CA0AE · #D0DDE5

CSS variables

:root {
  --coastal-stone-hearth-2-1: #6C7D8B;
  --coastal-stone-hearth-2-2: #8CA0AE;
  --coastal-stone-hearth-2-3: #ABBEC9;
  --coastal-stone-hearth-2-4: #D0DDE5;
  --coastal-stone-hearth-2-5: #F2F5F7;
}

Tailwind config

theme: {
  extend: {
    colors: {
      "coastal-stone-hearth-2": {
        1: "#6C7D8B",
        2: "#8CA0AE",
        3: "#ABBEC9",
        4: "#D0DDE5",
        5: "#F2F5F7",
      }
    }
  }
}

Related searches

calm blue grey palettecoastal stone colorscozy neutral designserene muted tonescomforting home palette

Palette colors

Hex values

Color 1#6C7D8B
·
Color 2#8CA0AE
·
Color 3#ABBEC9
·
Color 4#D0DDE5
·
Color 5#F2F5F7
·

Accessibility

Contrast checker

1
2
3
4
5
1
1.6:1Fail
2.2:1Fail
3.1:1AA18
3.9:1AA18
2
1.6:1Fail
1.4:1Fail
2:1Fail
2.5:1Fail
3
2.2:1Fail
1.4:1Fail
1.4:1Fail
1.8:1Fail
4
3.1:1AA18
2:1Fail
1.4:1Fail
1.3:1Fail
5
3.9:1AA18
2.5:1Fail
1.8:1Fail
1.3:1Fail

Similar palettes

More like Coastal Stone Hearth

View all Neutral
Clouded Moon Reflection
Pebble Shore
Pebble Shore Drift
Ancient Temple Serene
Coastal Fog Morning
Coastal Seagrass Whisper