Back to palettes

Palette

Marble Stone Serene

A sophisticated range of greys and whites, reminiscent of polished marble and minimalist design.

neutralelegant5 colors
More neutral palettes

Preview

See it in context.

Interface

New

Ready when you are.

A quick look at how Marble Stone Serene 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 Marble Stone Serene.

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

Data visualization

#3A3D40#6C7074#A6ABB0#DCDFE2#F8F8F8

Palette guide

How to use Marble Stone Serene

Overview

The Marble Stone Serene palette offers a sophisticated range of greys and whites, perfect for creating elegant and minimalist designs. Inspired by polished marble, this collection features deep charcoal #3A3D40, mid-tone grey #6C7074, light grey #A6ABB0, off-white #DCDFE2, and pristine white #F8F8F8. Designers and developers can leverage these versatile neutrals to convey luxury, stability, and timelessness, making it an excellent choice for high-end branding and clean user interfaces. The subtle variations allow for depth and dimension without sacrificing a refined aesthetic.

Best used for

  • Luxury brand identity and websites
  • Minimalist user interface design
  • Elegant interior design visuals
  • High-end product packaging
  • Corporate and professional presentations
  • Architectural renderings

Suggested color roles

primary

Use #3A3D40 as a strong, grounding primary for headlines or main structural elements, conveying sophistication.

secondary

Employ #6C7074 for supporting content, subheadings, or secondary interactive elements, offering gentle contrast.

accent

Apply #A6ABB0 for subtle highlights, borders, or decorative elements where a soft touch is desired.

background

Utilize #F8F8F8 or #DCDFE2 as a clean, bright background, providing an airy and expansive canvas.

text

For optimal readability, use #3A3D40 for main body text on light backgrounds like #F8F8F8. Consider #6C7074 for secondary text.

Accessibility notes

  • Ensure #3A3D40 text on #F8F8F8 background meets WCAG AAA contrast standards for maximum readability.
  • Avoid using #A6ABB0 for small body text on #DCDFE2 or #F8F8F8 due to insufficient contrast.
  • Use #6C7074 for larger headings on #F8F8F8 to enhance readability while maintaining a soft aesthetic.
  • Consider bolding text when using lighter grey shades like #A6ABB0 on backgrounds for better visual distinction.

Recommended combinations

Modern Contrast

Ideal for high-contrast UI elements, sophisticated branding, and clear content hierarchy.

#3A3D40 · #F8F8F8 · #DCDFE2

Subtle Layers

Excellent for creating layered backgrounds, minimalist graphics, and soft visual depth.

#F8F8F8 · #DCDFE2 · #A6ABB0

Deep Texture

Suitable for adding dimension to graphic elements, textured backgrounds, or subtle gradients.

#6C7074 · #A6ABB0 · #3A3D40

CSS variables

:root {
  --marble-stone-serene-1: #3A3D40;
  --marble-stone-serene-2: #6C7074;
  --marble-stone-serene-3: #A6ABB0;
  --marble-stone-serene-4: #DCDFE2;
  --marble-stone-serene-5: #F8F8F8;
}

Tailwind config

theme: {
  extend: {
    colors: {
      "marble-stone-serene": {
        1: "#3A3D40",
        2: "#6C7074",
        3: "#A6ABB0",
        4: "#DCDFE2",
        5: "#F8F8F8",
      }
    }
  }
}

Related searches

minimalist color schemeselegant grey palettesophisticated neutral colorsstone inspired designchic monochrome palette

Palette colors

Hex values

Color 1#3A3D40
·
Color 2#6C7074
·
Color 3#A6ABB0
·
Color 4#DCDFE2
·
Color 5#F8F8F8
·

Accessibility

Contrast checker

1
2
3
4
5
1
2.2:1Fail
4.7:1AA
8.2:1AAA
10.3:1AAA
2
2.2:1Fail
2.2:1Fail
3.7:1AA18
4.7:1AA
3
4.7:1AA
2.2:1Fail
1.7:1Fail
2.2:1Fail
4
8.2:1AAA
3.7:1AA18
1.7:1Fail
1.3:1Fail
5
10.3:1AAA
4.7:1AA
2.2:1Fail
1.3:1Fail

Similar palettes

More like Marble Stone Serene

View all neutral
Ancient Marble Ruins
Ancient Marble Veins
Boulevard Grey
Marble Dream
Ancient Calligraphy Ink
Ancient Marble Sculpture