Back to palettes

Palette

Stone Cairn Balance

A minimalist range of cool grays, like carefully stacked stones, conveying calm and understated elegance.

neutralminimal5 colors
More neutral palettes

Preview

See it in context.

Interface

New

Ready when you are.

A quick look at how Stone Cairn Balance 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 Stone Cairn Balance.

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

Data visualization

#3A3D40#61666B#8A9096#B9C0C8#E2E8F0

Palette guide

How to use Stone Cairn Balance

Overview

The Stone Cairn Balance palette offers a minimalist range of cool grays, like carefully stacked stones, conveying calm and understated elegance. From the deep charcoal of #3A3D40 to the soft, airy light gray of #E2E8F0, with balanced mid-tones like #61666B, #8A9096, and #B9C0C8, this collection is perfect for designers and developers seeking a sophisticated, neutral foundation. It excels in creating clean, modern interfaces and branding that emphasize professionalism, clarity, and timelessness. The monochromatic nature ensures inherent harmony, allowing for focus on content and structure, making it highly versatile for corporate, architectural, or artistic applications.

Best used for

  • Corporate and professional websites
  • Architectural design portfolios
  • Minimalist user interfaces
  • Luxury brand identity
  • Urban-themed digital art
  • Print materials requiring understated elegance

Suggested color roles

primary

#61666B - A solid, balanced mid-gray that provides a strong yet unobtrusive foundation for primary content blocks or structural elements.

secondary

#8A9096 - A slightly lighter gray that complements the primary, offering gentle differentiation for subheadings, borders, or secondary information.

accent

#3A3D40 - A deep, rich charcoal that provides impactful contrast and sophistication. Ideal for calls to action, important icons, or prominent text.

background

#E2E8F0 - A very light, almost off-white gray that creates a clean, expansive, and subtle background for pages and content areas.

text

#3A3D40 - This deep charcoal offers excellent readability against lighter grays like #E2E8F0 or #B9C0C8, providing a sharp and professional text color.

Accessibility notes

  • Ensure sufficient contrast when using #B9C0C8 for text on #E2E8F0; avoid low contrast pairings.
  • Pair darker shades like #3A3D40 or #61666B with #E2E8F0 or #B9C0C8 for optimal text readability.
  • For interactive elements, clearly differentiate states (e.g., hover, active) using distinct shades from the palette.
  • Pay close attention to contrast ratios for small text and icons, especially in monochromatic palettes where subtle differences might be missed.

Recommended combinations

Strong Foundation

Use #3A3D40 for bold headlines, #E2E8F0 as a clean background, and #61666B for primary content text, creating clear visual hierarchy.

#3A3D40 · #E2E8F0 · #61666B

Balanced Layers

Combine #61666B for main sections, #8A9096 for secondary panels, and #B9C0C8 for subtle borders or dividers, building depth.

#61666B · #8A9096 · #B9C0C8

Modern Edge

Apply #B9C0C8 for a dominant background section, #3A3D40 for sharp text or accents, and #E2E8F0 for contrasting elements.

#B9C0C8 · #3A3D40 · #E2E8F0

CSS variables

:root {
  --stone-cairn-balance-1: #3A3D40;
  --stone-cairn-balance-2: #61666B;
  --stone-cairn-balance-3: #8A9096;
  --stone-cairn-balance-4: #B9C0C8;
  --stone-cairn-balance-5: #E2E8F0;
}

Tailwind config

theme: {
  extend: {
    colors: {
      "stone-cairn-balance": {
        1: "#3A3D40",
        2: "#61666B",
        3: "#8A9096",
        4: "#B9C0C8",
        5: "#E2E8F0",
      }
    }
  }
}

Related searches

minimalist gray palettecool neutral colorsprofessional monochrome schemeunderstated elegance designarchitectural color palette

Palette colors

Hex values

Color 1#3A3D40
·
Color 2#61666B
·
Color 3#8A9096
·
Color 4#B9C0C8
·
Color 5#E2E8F0
·

Accessibility

Contrast checker

1
2
3
4
5
1
1.9:1Fail
3.4:1AA18
6:1AA
8.9:1AAA
2
1.9:1Fail
1.8:1Fail
3.2:1AA18
4.7:1AA
3
3.4:1AA18
1.8:1Fail
1.8:1Fail
2.6:1Fail
4
6:1AA
3.2:1AA18
1.8:1Fail
1.5:1Fail
5
8.9:1AAA
4.7:1AA
2.6:1Fail
1.5:1Fail

Similar palettes

More like Stone Cairn Balance

View all neutral
Cloudy Cobblestone Lane
Urban Loft Serene
Adobe Sunstone Hues
Ancient City Ruins
Ancient Rune Stone
Architectural Concrete Edge