Palette

Lake Shore Pebbles

The subtle and comforting tones of smooth stones and wet sand on a quiet lake shore.

neutralcalm5 colors

More neutral palettes

Preview

See it in context.

Interface

New

Ready when you are.

A quick look at how Lake Shore Pebbles 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 Lake Shore Pebbles.

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

Data visualization

#708090#8B4513#CD853F#D2B48C#B0C4DE

Palette guide

How to use Lake Shore Pebbles

Overview

The Lake Shore Pebbles palette captures the subtle and comforting tones of smooth stones and wet sand on a quiet lake shore. This neutral and earthy collection features grounding greys and rich browns, including the cool #708090, deep #8B4513, and warm #CD853F. The lighter, sandy #D2B48C and soft blue-grey #B0C4DE complete the array, providing a sense of natural tranquility and understated elegance. This palette is excellent for designers seeking to evoke calm, natural textures, and a timeless aesthetic. It's ideal for sustainable brands, rustic decor, or any project requiring a grounded, organic, and sophisticated visual identity, fostering a sense of peace and authenticity.

Best used for

Sustainable and eco-friendly branding
Rustic and natural home decor websites
Outdoor and nature-themed content
Craft and artisanal product packaging
Minimalist web design with earthy tones
Architectural and interior design presentations

Suggested color roles

primary

Use #708090 as a grounding primary for main navigation or headers, providing a stable and sophisticated grey-blue base.

secondary

Apply #8B4513 for subheadings, secondary content blocks, or strong graphical elements, offering a rich, deep brown.

accent

Utilize #CD853F as a warm accent for interactive elements or highlights, introducing a touch of inviting warmth.

background

Employ #B0C4DE for clean, expansive backgrounds, creating a light, airy canvas that enhances readability and natural feel.

text

For primary body text, a dark brown or charcoal offers excellent contrast on #B0C4DE. On darker shades like #8B4513, white or a very light cream is ideal.

Accessibility notes

Ensure sufficient contrast between #8B4513 and #B0C4DE for text, meeting WCAG AA standards.
Be cautious when pairing #D2B48C with #B0C4DE for small text, as contrast might be insufficient.
Use #708090 or #8B4513 for all critical text on lighter backgrounds to ensure optimal readability.
Test color combinations for interactive elements to ensure they are clearly distinguishable and functional for all users.

Recommended combinations

Riverbed Stones

Creates a deep, earthy, and grounded feel; ideal for strong headers, navigation, or natural product branding.

#708090 · #8B4513 · #CD853F

Sandy Shore

Offers a light, airy, and natural aesthetic; excellent for background textures, subtle gradients, or clean layouts.

#D2B48C · #B0C4DE · #CD853F

Earthy Contrast

Provides clear visual hierarchy with a natural balance; effective for highlighting important information against a light backdrop.

#8B4513 · #B0C4DE · #708090

CSS variables

:root {
  --lake-shore-pebbles-1: #708090;
  --lake-shore-pebbles-2: #8B4513;
  --lake-shore-pebbles-3: #CD853F;
  --lake-shore-pebbles-4: #D2B48C;
  --lake-shore-pebbles-5: #B0C4DE;
}

Tailwind config

theme: {
  extend: {
    colors: {
      "lake-shore-pebbles": {
        1: "#708090",
        2: "#8B4513",
        3: "#CD853F",
        4: "#D2B48C",
        5: "#B0C4DE",
      }
    }
  }
}

Hex values

Color 1#708090

Color 2#8B4513

Color 3#CD853F

Color 4#D2B48C

Color 5#B0C4DE

Accessibility

Contrast checker

1.8:1Fail

1.4:1Fail

2.1:1Fail

2.3:1Fail

1.8:1Fail

2.4:1Fail

3.6:1AA18

4:1AA18

1.4:1Fail

2.4:1Fail

1.5:1Fail

1.7:1Fail