Back to palettes

Palette

Contemplative Stone Flow

A serene progression of grey tones, inspired by the smooth, quiet harmony of a minimalist stone garden.

monochromecalm5 colors
More monochrome palettes

Preview

See it in context.

Interface

New

Ready when you are.

A quick look at how Contemplative Stone Flow 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 Contemplative Stone Flow.

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

Data visualization

#4A4A4A#6E6E6E#929292#B6B6B6#DADCDE

Palette guide

How to use Contemplative Stone Flow

Overview

The Contemplative Stone Flow palette offers a serene and minimalist progression of cool grey tones, ideal for creating a sense of calm, sophistication, and timeless elegance. Ranging from the deep #4A4A4A to the light #DADCDE, with balanced mid-tones like #6E6E6E, #929292, and #B6B6B6, this palette provides versatility for various design applications. Designers and developers can leverage these harmonious greys to build clean, uncluttered interfaces, refined branding, or understated architectural visualizations. Its monochromatic nature ensures visual consistency and allows content to take center stage, fostering a contemplative user experience.

Best used for

  • Minimalist website design
  • High-end architectural firm branding
  • Zen garden or meditation app interfaces
  • Luxury product packaging (minimalist)
  • Art gallery or museum digital presence
  • Modern interior design mood boards

Suggested color roles

primary

Utilize #4A4A4A as a strong, grounding primary for headers or important interactive elements.

secondary

Apply #6E6E6E for secondary content areas, subtle dividers, or background elements.

accent

Use #B6B6B6 as a light accent for hover states, subtle highlights, or delicate iconography.

background

The very light #DADCDE serves as an excellent clean, open canvas for content.

text

For optimal readability, use #4A4A4A for main body text on lighter backgrounds, or white on darker tones.

Accessibility notes

  • Ensure sufficient contrast when pairing different shades of grey, especially for text.
  • Text in #4A4A4A on #DADCDE provides excellent readability and meets WCAG standards.
  • Avoid using mid-grey text (e.g., #929292) on mid-grey backgrounds (e.g., #B6B6B6) as contrast will be low.
  • Use a clear visual hierarchy with varying shades to guide users through the content.

Recommended combinations

Deep & Light

Perfect for high-contrast text and background, or defining strong sections.

#4A4A4A · #DADCDE · #6E6E6E

Subtle Layers

Ideal for creating depth in UI elements, card backgrounds, or subtle gradients.

#6E6E6E · #929292 · #B6B6B6

Clean Canvas

Excellent for primary content areas, offering a crisp, readable foundation.

#DADCDE · #4A4A4A · #929292

CSS variables

:root {
  --contemplative-stone-flow-1: #4A4A4A;
  --contemplative-stone-flow-2: #6E6E6E;
  --contemplative-stone-flow-3: #929292;
  --contemplative-stone-flow-4: #B6B6B6;
  --contemplative-stone-flow-5: #DADCDE;
}

Tailwind config

theme: {
  extend: {
    colors: {
      "contemplative-stone-flow": {
        1: "#4A4A4A",
        2: "#6E6E6E",
        3: "#929292",
        4: "#B6B6B6",
        5: "#DADCDE",
      }
    }
  }
}

Related searches

minimalist grey color palettezen calm design colorsmonochromatic stone hex codessophisticated grey UI palettecontemplative neutral colors

Palette colors

Hex values

Color 1#4A4A4A
·
Color 2#6E6E6E
·
Color 3#929292
·
Color 4#B6B6B6
·
Color 5#DADCDE
·

Accessibility

Contrast checker

1
2
3
4
5
1
1.7:1Fail
2.8:1Fail
4.4:1AA18
6.4:1AA
2
1.7:1Fail
1.6:1Fail
2.5:1Fail
3.7:1AA18
3
2.8:1Fail
1.6:1Fail
1.5:1Fail
2.3:1Fail
4
4.4:1AA18
2.5:1Fail
1.5:1Fail
1.5:1Fail
5
6.4:1AA
3.7:1AA18
2.3:1Fail
1.5:1Fail

Similar palettes

More like Contemplative Stone Flow

View all monochrome