Palette

Weathered Beach Stone

A calming collection of muted blues and grays, like stones smoothed by ocean tides on a quiet beach.

coolcalm5 colors

More cool palettes

Preview

See it in context.

Interface

New

Ready when you are.

A quick look at how Weathered Beach Stone 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 Weathered Beach Stone.

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

Data visualization

#3E4B56#6D7D8B#9DB0BC#C6D3DF#EBF3F8

Palette guide

How to use Weathered Beach Stone

Overview

The "Weathered Beach Stone" palette offers a sophisticated and serene collection of cool, muted blues and grays, evoking the calm tranquility of ocean-smoothed pebbles. Featuring hex codes such as the deep #3E4B56, the balanced #6D7D8B, and the airy #EBF3F8, this scheme is perfect for designs requiring a sense of peace and understated elegance. Its gentle progression from dark to light creates a harmonious flow, ideal for establishing a clean, modern aesthetic. Designers and developers can leverage this palette to craft interfaces and brands that feel grounded, refreshing, and subtly luxurious, providing a soothing visual experience across various applications.

Best used for

Spa and wellness brand identities
Minimalist website and app UI design
Coastal-themed interior decor concepts
Nature photography portfolios and galleries
Corporate branding seeking a calm, professional image
Eco-conscious product packaging

Suggested color roles

primary

#3E4B56 - Use for strong headings, primary calls-to-action, or dominant structural elements to establish a deep, grounding presence.

secondary

#6D7D8B - Ideal for subheadings, secondary buttons, or large content blocks where a softer contrast to the primary is desired.

accent

#9DB0BC - Perfect for subtle interactive elements, highlights, or secondary graphical details to add a touch of lightness without disruption.

background

#EBF3F8 - Apply as the main background color for a clean, airy canvas that enhances readability and provides a sense of spaciousness.

text

#3E4B56 - Recommended for body text and paragraphs to ensure excellent readability against lighter backgrounds like #EBF3F8.

Accessibility notes

Ensure #3E4B56 text on #EBF3F8 background meets WCAG AAA contrast requirements for maximum readability.
Avoid using #6D7D8B or #9DB0BC for small text on a #C6D3DF background due to insufficient contrast.
Use a contrast checker for all text and interactive element color pairings, especially with mid-tones.
For larger text or headings, #6D7D8B can be legible on #EBF3F8, but always verify contrast ratios.

Recommended combinations

High Contrast

Excellent for a clean, readable layout with strong visual hierarchy, e.g., dark text on light background with a mid-tone accent.

#3E4B56 · #EBF3F8 · #6D7D8B

Soft Gradient

Create subtle background gradients, layered cards, or progressive disclosure elements for a sophisticated, tranquil feel.

#6D7D8B · #9DB0BC · #C6D3DF

Modern Minimal

A crisp foundation with a dominant dark anchor and a soft, muted accent for minimalist UIs or brand collateral.

#EBF3F8 · #3E4B56 · #9DB0BC

CSS variables

:root {
  --weathered-beach-stone-1: #3E4B56;
  --weathered-beach-stone-2: #6D7D8B;
  --weathered-beach-stone-3: #9DB0BC;
  --weathered-beach-stone-4: #C6D3DF;
  --weathered-beach-stone-5: #EBF3F8;
}

Tailwind config

theme: {
  extend: {
    colors: {
      "weathered-beach-stone": {
        1: "#3E4B56",
        2: "#6D7D8B",
        3: "#9DB0BC",
        4: "#C6D3DF",
        5: "#EBF3F8",
      }
    }
  }
}

Hex values

Color 1#3E4B56

Color 2#6D7D8B

Color 3#9DB0BC

Color 4#C6D3DF

Color 5#EBF3F8

Accessibility

Contrast checker

2.1:1Fail

4:1AA18

5.9:1AA

8:1AAA

2.1:1Fail

1.9:1Fail

2.8:1Fail

3.8:1AA18

4:1AA18

1.9:1Fail

1.5:1Fail

2:1Fail

5.9:1AA

2.8:1Fail

1.5:1Fail

1.4:1Fail

8:1AAA

3.8:1AA18

2:1Fail

1.4:1Fail

Similar palettes

More like Weathered Beach Stone