Back to palettes

Palette

Stone Quarry Mist

Reflects the cool, muted tones of excavated stone, enveloped in a gentle morning mist.

neutralminimal5 colors
More neutral palettes

Preview

See it in context.

Interface

New

Ready when you are.

A quick look at how Stone Quarry Mist 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 Quarry Mist.

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

Data visualization

#708090#848482#A9A9A9#B0C4DE#D3D3D3

Palette guide

How to use Stone Quarry Mist

Overview

The Stone Quarry Mist palette captures the cool, muted tones of excavated stone enveloped in a gentle morning mist, offering a serene and natural aesthetic. This collection features a beautiful range from the light and airy #D3D3D3 to the grounding #708090, with the subtle blue-gray of #B0C4DE adding a touch of cool sophistication. The earthy #848482 provides a natural texture, while #A9A9A9 acts as a versatile mid-tone. This palette is excellent for designers seeking to evoke a sense of calm, purity, and understated elegance in their projects.

Best used for

  • Spa and wellness brand identities
  • Natural product packaging design
  • Architectural visualization and renderings
  • Serene interior design concepts
  • Clean tech interface designs
  • Eco-friendly corporate communications

Suggested color roles

primary

Use #708090 (Slate Gray) as a grounding primary color for headers or important content sections, providing stability.

secondary

Apply #B0C4DE (Light Steel Blue) for subtle highlights, interactive elements, or as a gentle secondary background.

accent

Employ #848482 (Gray) for a touch of earthy texture, secondary emphasis, or subtle decorative elements.

background

Utilize #D3D3D3 (Light Gray) as a soft, expansive background to create a sense of openness and tranquility.

text

Opt for #708090 or a slightly darker charcoal for body text, ensuring excellent readability against lighter backgrounds.

Accessibility notes

  • Ensure #708090 text on #D3D3D3 backgrounds meets WCAG AA contrast standards.
  • Avoid using #A9A9A9 for small text on #B0C4DE backgrounds due to potential low contrast.
  • For critical information, use darker tones like #708090 to ensure sufficient readability.
  • Provide ample spacing and clear visual hierarchy when using multiple light gray tones together.

Recommended combinations

Misty Layers

Perfect for creating soft gradients, layered backgrounds, or subtle UI components that evoke depth.

#D3D3D3 · #B0C4DE · #A9A9A9

Quarry Depth

Effective for defining headers, content blocks, and providing a clean background canvas.

#708090 · #848482 · #D3D3D3

Cool Accents

Ideal for interactive elements like buttons, icons, or primary text against a muted backdrop.

#B0C4DE · #708090 · #A9A9A9

CSS variables

:root {
  --stone-quarry-mist-1: #708090;
  --stone-quarry-mist-2: #848482;
  --stone-quarry-mist-3: #A9A9A9;
  --stone-quarry-mist-4: #B0C4DE;
  --stone-quarry-mist-5: #D3D3D3;
}

Tailwind config

theme: {
  extend: {
    colors: {
      "stone-quarry-mist": {
        1: "#708090",
        2: "#848482",
        3: "#A9A9A9",
        4: "#B0C4DE",
        5: "#D3D3D3",
      }
    }
  }
}

Related searches

cool grey paletteserene color schemenatural stone colorsmist inspired palettearchitectural neutrals

Palette colors

Hex values

Color 1#708090
·
Color 2#848482
·
Color 3#A9A9A9
·
Color 4#B0C4DE
·
Color 5#D3D3D3
·

Accessibility

Contrast checker

1
2
3
4
5
1
1.1:1Fail
1.7:1Fail
2.3:1Fail
2.7:1Fail
2
1.1:1Fail
1.6:1Fail
2.1:1Fail
2.5:1Fail
3
1.7:1Fail
1.6:1Fail
1.3:1Fail
1.6:1Fail
4
2.3:1Fail
2.1:1Fail
1.3:1Fail
1.2:1Fail
5
2.7:1Fail
2.5:1Fail
1.6:1Fail
1.2:1Fail

Similar palettes

More like Stone Quarry Mist

View all neutral
Calm Lakeside Stone
Pebble Beach Stone
River Stone Whisper
Riverbend Stone
Silent Concrete Minimal
Stone Garden Path