Palette

Stone Mosaic Craft

Subtly varied tones of natural stone, arranged in a simple, elegant mosaic pattern.

neutralminimal5 colors

More neutral palettes

Preview

See it in context.

Interface

New

Ready when you are.

A quick look at how Stone Mosaic Craft 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 Mosaic Craft.

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

Data visualization

#5B5B5B#8A8A8A#C0C0C0#DCDCDC#E8E8E8

Palette guide

How to use Stone Mosaic Craft

Overview

The Stone Mosaic Craft palette features subtly varied tones of natural stone, arranged to evoke a simple, elegant mosaic pattern. Ranging from the very light #E8E8E8 and #DCDCDC, through the balanced #C0C0C0 and #8A8A8A, to the deeper, grounding #5B5B5B, this collection offers sophisticated versatility. Designers and developers can leverage these harmonious greys to create digital and physical spaces that feel refined, artisanal, and subtly textured. It's an excellent choice for projects requiring a blend of natural elegance and modern minimalism, ideal for art, craft, luxury, or architectural themes where understated beauty is key.

Best used for

Art and craft studio websites
Luxury product showcases
Architectural portfolio design
Elegant personal branding
Minimalist e-commerce interfaces
Digital art presentations

Suggested color roles

primary

#8A8A8A - A balanced mid-grey, ideal for main content areas or navigation, providing a solid yet refined presence.

secondary

#C0C0C0 - A lighter, versatile grey, suitable for subheadings, secondary buttons, or subtle background variations in UI elements.

accent

#5B5B5B - The deepest, most grounding grey, perfect for strong calls to action, important icons, or to define borders with a clear, elegant edge.

background

#E8E8E8 - A very light, near-white grey that provides a clean, bright, and expansive canvas for content, softer than pure white.

text

#5B5B5B - This deep grey offers excellent contrast against #E8E8E8 or #DCDCDC, ensuring optimal readability for body text and headings.

Accessibility notes

Ensure sufficient contrast for text in #8A8A8A against #E8E8E8 or #DCDCDC; consider larger font sizes or bolder weights.
The darkest shade, #5B5B5B, is crucial for all primary text to meet WCAG AA contrast standards on light backgrounds.
Avoid using #DCDCDC or #E8E8E8 for text, as they lack sufficient contrast against any background in this palette.
For interactive elements, provide clear visual feedback beyond color alone, especially for buttons using similar mid-tones like #C0C0C0.

Recommended combinations

Mosaic Base

Creates a light, layered background with subtle transitions, perfect for showcasing content cards.

#E8E8E8 · #DCDCDC · #C0C0C0

Crafted Focus

Excellent for defining sections, with #5B5B5B providing strong text on a light background, framed by #8A8A8A.

#8A8A8A · #5B5B5B · #E8E8E8

Elegant Detail

Ideal for interactive elements or subtle calls to action, ensuring clarity and a refined, artisanal feel.

#C0C0C0 · #DCDCDC · #5B5B5B

CSS variables

:root {
  --stone-mosaic-craft-1: #5B5B5B;
  --stone-mosaic-craft-2: #8A8A8A;
  --stone-mosaic-craft-3: #C0C0C0;
  --stone-mosaic-craft-4: #DCDCDC;
  --stone-mosaic-craft-5: #E8E8E8;
}

Tailwind config

theme: {
  extend: {
    colors: {
      "stone-mosaic-craft": {
        1: "#5B5B5B",
        2: "#8A8A8A",
        3: "#C0C0C0",
        4: "#DCDCDC",
        5: "#E8E8E8",
      }
    }
  }
}

Hex values

Color 1#5B5B5B

Color 2#8A8A8A

Color 3#C0C0C0

Color 4#DCDCDC

Color 5#E8E8E8

Accessibility

Contrast checker

2:1Fail

3.7:1AA18

5:1AA

5.5:1AA

2:1Fail

1.9:1Fail

2.5:1Fail

2.8:1Fail

3.7:1AA18

1.9:1Fail

1.3:1Fail

1.5:1Fail

5:1AA

2.5:1Fail

1.3:1Fail

1.1:1Fail

5.5:1AA

2.8:1Fail

1.5:1Fail

1.1:1Fail

Similar palettes

More like Stone Mosaic Craft

Ancient Temple Stones

Calm Stone Pathway

Metro Grid Hues