Back to palettes

Palette

Calm Stone Meditate

Muted grays and soft blues reflecting the tranquil, contemplative aesthetic of a Japanese rock garden.

monochromeminimal5 colors
More monochrome palettes

Preview

See it in context.

Interface

New

Ready when you are.

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

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

Data visualization

#484848#6D6D6D#969696#B0C4DE#DCDCDC

Palette guide

How to use Calm Stone Meditate

Overview

The Calm Stone Meditate palette offers a tranquil, contemplative aesthetic inspired by Japanese rock gardens, featuring a range of muted grays and a soft blue. Key shades include the deep #484848, a versatile medium grey #6D6D6D, and the lighter #969696. The serene #B0C4DE introduces a subtle, calming blue, while #DCDCDC serves as a very light, clean base. This monochrome-inspired palette is excellent for designers and developers aiming to create minimalist, sophisticated, and calming user experiences or brand identities.

Best used for

  • Meditation and mindfulness applications
  • Minimalist interior design concepts
  • Corporate and architectural branding
  • Clean and sophisticated UI/UX design
  • Serene editorial layouts and photography
  • High-end tech product interfaces

Suggested color roles

primary

Use #6D6D6D (medium grey) as a balanced and versatile base for primary content areas.

secondary

Employ #484848 (dark grey) for strong anchors, important headers, or interactive elements.

accent

Introduce #B0C4DE (soft steel blue) as a subtle, calming accent for highlights, icons, or secondary information.

background

Apply #DCDCDC (light grey) as a clean, unobtrusive background, providing a sense of spaciousness.

text

Utilize #484848 (dark grey) for most text to ensure excellent readability against lighter backgrounds.

Accessibility notes

  • Ensure #484848 text on #DCDCDC background provides sufficient contrast for all text sizes (WCAG AA).
  • The lighter grays like #969696 should be used for larger elements or non-critical text, not small body copy.
  • Avoid using #B0C4DE as a text color on very light backgrounds like #DCDCDC due to low contrast.
  • For interactive elements, use darker shades like #484848 or #6D6D6D to indicate functionality clearly.

Recommended combinations

Zen Core

Perfect for a classic minimalist interface, offering clear hierarchy and a calm user experience.

#DCDCDC · #6D6D6D · #484848

Cool Serenity

Ideal for calm landing pages, subtle branding, or elements that need a gentle, soothing presence.

#B0C4DE · #DCDCDC · #6D6D6D

Depth & Contrast

Suitable for sophisticated dashboards, data visualization, or to add visual interest with subtle color shifts.

#484848 · #969696 · #B0C4DE

CSS variables

:root {
  --calm-stone-meditate-1: #484848;
  --calm-stone-meditate-2: #6D6D6D;
  --calm-stone-meditate-3: #969696;
  --calm-stone-meditate-4: #B0C4DE;
  --calm-stone-meditate-5: #DCDCDC;
}

Tailwind config

theme: {
  extend: {
    colors: {
      "calm-stone-meditate": {
        1: "#484848",
        2: "#6D6D6D",
        3: "#969696",
        4: "#B0C4DE",
        5: "#DCDCDC",
      }
    }
  }
}

Related searches

grey blue palettetranquil ui colorsminimalist zen designstone aesthetic palettecalm corporate branding

Palette colors

Hex values

Color 1#484848
·
Color 2#6D6D6D
·
Color 3#969696
·
Color 4#B0C4DE
·
Color 5#DCDCDC
·

Accessibility

Contrast checker

1
2
3
4
5
1
1.8:1Fail
3.1:1AA18
5.1:1AA
6.7:1AA
2
1.8:1Fail
1.7:1Fail
2.9:1Fail
3.8:1AA18
3
3.1:1AA18
1.7:1Fail
1.7:1Fail
2.2:1Fail
4
5.1:1AA
2.9:1Fail
1.7:1Fail
1.3:1Fail
5
6.7:1AA
3.8:1AA18
2.2:1Fail
1.3:1Fail

Similar palettes

More like Calm Stone Meditate

View all monochrome
Zen Pebble Serenity
Minimalist Stone Garden
Quiet Pebble Stream
Stone Garden Meditation
Tranquil Stone Path
Zen Garden Grey