Back to palettes

Palette

Calm Lakeside Stone

Serene and grounding greys inspired by the smooth, cool pebbles found at a tranquil lakeside shore.

neutralminimal5 colors
More neutral palettes

Preview

See it in context.

Interface

New

Ready when you are.

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

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

Data visualization

#E0E4E7#C3C7CC#A4A7AD#878A90#6C6F74

Palette guide

How to use Calm Lakeside Stone

Overview

The Calm Lakeside Stone palette offers serene and grounding greys, inspired by the smooth, cool pebbles found at a tranquil lakeside shore. This minimalist collection features a very light, almost white grey, #E0E4E7, and progressively darker, cooler greys: #C3C7CC, #A4A7AD, #878A90, and a deep, solid grey, #6C6F74. Designers will find this palette excellent for creating clean, modern, and uncluttered visuals that emphasize natural textures and timelessness. Developers can leverage these colors to build sophisticated and highly functional user interfaces for brands focused on technology, architecture, sustainable design, or any application seeking a minimalist, elegant, and timeless aesthetic, prioritizing clarity and subtle strength.

Best used for

  • Architectural design portfolios
  • Sustainable product branding
  • Minimalist interior design
  • High-tech software interfaces
  • Nature-inspired home goods
  • Corporate websites with a clean aesthetic

Suggested color roles

primary

Utilize #E0E4E7 as the main, pristine background color, providing a sense of calm and expansive space.

secondary

Apply #C3C7CC for subtle distinctions in backgrounds or inactive elements, maintaining a light, airy feel.

accent

Introduce #A4A7AD as a gentle accent for dividers, borders, or subtle interactive states, adding definition without harshness.

background

Employ #E0E4E7 for clean, airy backgrounds, allowing content to breathe and maintain a minimalist aesthetic.

text

Use #6C6F74 for main body text and headings, ensuring strong readability and a sophisticated, grounded feel against lighter backgrounds.

Accessibility notes

  • Ensure sufficient contrast between #6C6F74 text and #E0E4E7 or #C3C7CC backgrounds for optimal readability.
  • Avoid using lighter greys like #A4A7AD or #878A90 for small text against similar light backgrounds due to low contrast.
  • For interactive elements, use #6C6F74 or #878A90 to ensure clear affordance and meet WCAG contrast guidelines.
  • Use distinct visual cues beyond color, such as underlines or icons, for interactive elements, especially with subtle color differences.

Recommended combinations

Stone Layers

Creates subtle depth and hierarchy through layered shades of grey, ideal for background sections or cards.

#E0E4E7 · #C3C7CC · #A4A7AD

Lakeside Depth

Provides clear separation for text or important elements against a light background, suitable for content blocks or navigation.

#6C6F74 · #E0E4E7 · #878A90

Cool Greys

Offers a gentle contrast for UI components like buttons or input fields, maintaining a clean and understated look.

#A4A7AD · #878A90 · #C3C7CC

CSS variables

:root {
  --calm-lakeside-stone-1: #E0E4E7;
  --calm-lakeside-stone-2: #C3C7CC;
  --calm-lakeside-stone-3: #A4A7AD;
  --calm-lakeside-stone-4: #878A90;
  --calm-lakeside-stone-5: #6C6F74;
}

Tailwind config

theme: {
  extend: {
    colors: {
      "calm-lakeside-stone": {
        1: "#E0E4E7",
        2: "#C3C7CC",
        3: "#A4A7AD",
        4: "#878A90",
        5: "#6C6F74",
      }
    }
  }
}

Related searches

calm grey palettelakeside stone colorsneutral cool grey schememinimalist natural greyserene architectural colors

Palette colors

Hex values

Color 1#E0E4E7
·
Color 2#C3C7CC
·
Color 3#A4A7AD
·
Color 4#878A90
·
Color 5#6C6F74
·

Accessibility

Contrast checker

1
2
3
4
5
1
1.3:1Fail
1.9:1Fail
2.7:1Fail
3.9:1AA18
2
1.3:1Fail
1.4:1Fail
2:1Fail
3:1Fail
3
1.9:1Fail
1.4:1Fail
1.4:1Fail
2.1:1Fail
4
2.7:1Fail
2:1Fail
1.4:1Fail
1.5:1Fail
5
3.9:1AA18
3:1Fail
2.1:1Fail
1.5:1Fail

Similar palettes

More like Calm Lakeside Stone

View all neutral
River Stone Whisper
Calm Stone Pathway
Coastal Pebble Smooth
Moonlit Canyon Stone
Pebble Beach Stone
Pebble Path Serenity