Back to palettes

Palette

Seashore Stone Calm

Soft, muted tones reflecting the soothing grays and cool whites of a quiet, undisturbed pebble beach.

neutralcalm5 colors
More neutral palettes

Preview

See it in context.

Interface

New

Ready when you are.

A quick look at how Seashore Stone Calm 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 Seashore Stone Calm.

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

Data visualization

#A9A9A9#778899#B0C4DE#DCDCDC#F5F5DC

Palette guide

How to use Seashore Stone Calm

Overview

The Seashore Stone Calm palette offers a sophisticated blend of soft, muted tones, perfectly reflecting the soothing grays and cool whites of a tranquil pebble beach. This neutral collection, featuring hex codes like #A9A9A9 (Dark Gray), #778899 (Slate Gray), #B0C4DE (Light Steel Blue), #DCDCDC (Gainsboro), and #F5F5DC (Beige), is ideal for designers and developers aiming for a minimalist, serene aesthetic. Its inherent calmness makes it versatile for projects requiring a sense of peace and understated elegance, providing a gentle backdrop for content without being overpowering. The palette allows for subtle depth and texture through its varying shades of gray and cool blue-grays, anchored by a warm, inviting off-white.

Best used for

  • Minimalist web design and user interfaces
  • Interior design concepts for calm living spaces
  • Branding for spas, wellness centers, or artisan products
  • Photography backdrops and portfolio layouts
  • UI/UX for contemplative or meditation applications
  • Eco-friendly or sustainable product packaging

Suggested color roles

primary

Use #778899 (Slate Gray) as a sophisticated, grounding base for main content blocks, navigation bars, or prominent headings.

secondary

Employ #B0C4DE (Light Steel Blue) to provide a subtle cool contrast, perfect for secondary headings, interactive elements, or background sections.

accent

Apply #A9A9A9 (Dark Gray) sparingly for subtle emphasis on icons, dividers, or hover states to add depth without overwhelming the calm aesthetic.

background

Utilize #F5F5DC (Beige) as a warm, inviting off-white that creates a soft, spacious canvas, allowing other colors to gently emerge.

text

For primary text, #778899 or a dark charcoal like #333333 on #F5F5DC ensures readability. Use #A9A9A9 for secondary text or captions.

Accessibility notes

  • Ensure sufficient contrast between #778899 or #A9A9A9 and lighter backgrounds like #F5F5DC for all text elements.
  • Text on #DCDCDC or #B0C4DE might require a darker shade (e.g., black or #778899) for good readability, especially for smaller fonts.
  • Always use a contrast checker to verify WCAG AA compliance for all text and interactive components.
  • Avoid using #DCDCDC on #F5F5DC for essential information due to very low contrast.

Recommended combinations

Stone & Sky

A classic cool-neutral combination for headers, subheadings, and main content areas, providing a serene and balanced feel.

#778899 · #B0C4DE · #F5F5DC

Pebble Beach

Excellent for layered backgrounds, card elements, and subtle UI components, creating a soft, textured and inviting appearance.

#A9A9A9 · #DCDCDC · #F5F5DC

Deep Calm

For a more muted, sophisticated feel, ideal for corporate presentations or professional interfaces where subtle variations add depth.

#778899 · #A9A9A9 · #DCDCDC

CSS variables

:root {
  --seashore-stone-calm-1: #A9A9A9;
  --seashore-stone-calm-2: #778899;
  --seashore-stone-calm-3: #B0C4DE;
  --seashore-stone-calm-4: #DCDCDC;
  --seashore-stone-calm-5: #F5F5DC;
}

Tailwind config

theme: {
  extend: {
    colors: {
      "seashore-stone-calm": {
        1: "#A9A9A9",
        2: "#778899",
        3: "#B0C4DE",
        4: "#DCDCDC",
        5: "#F5F5DC",
      }
    }
  }
}

Related searches

calm neutral color schemecoastal gray beige palettestone inspired web design colorsminimalist interior color ideasserene natural color collection

Palette colors

Hex values

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

Accessibility

Contrast checker

1
2
3
4
5
1
1.5:1Fail
1.3:1Fail
1.7:1Fail
2.1:1Fail
2
1.5:1Fail
2:1Fail
2.7:1Fail
3.3:1AA18
3
1.3:1Fail
2:1Fail
1.3:1Fail
1.6:1Fail
4
1.7:1Fail
2.7:1Fail
1.3:1Fail
1.2:1Fail
5
2.1:1Fail
3.3:1AA18
1.6:1Fail
1.2:1Fail

Similar palettes

More like Seashore Stone Calm

View all neutral
Coastal Driftwood Grey
Coastal Dune Serenity
Coastal Fog Drift
Driftwood Shore Breeze
Mindful Stone Serenity
River Stone Calm