Back to palettes

Palette

Smoky Quartz

Ethereal grays with deep undertones, like the mystic translucence of smoky quartz crystals.

neutralminimal5 colors
More neutral palettes

Preview

See it in context.

Interface

New

Ready when you are.

A quick look at how Smoky Quartz 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 Smoky Quartz.

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

Data visualization

#A9A9A9#778899#696969#5A5A5A#4D4D4D

Palette guide

How to use Smoky Quartz

Overview

The Smoky Quartz palette features ethereal grays with deep undertones, like the mystic translucence of smoky quartz crystals. Ranging from the profound #4D4D4D (Dark Gray) to the lighter #A9A9A9 (Dark Gray/Light Gray), with versatile mid-tones like #5A5A5A (Dark Gray) and #778899 (Light Slate Gray), this collection offers a subtle and sophisticated aesthetic. Designers and developers can leverage these tones to create clean, minimalist digital experiences, branding, or interfaces that convey stability, clarity, and understated luxury, perfect for projects requiring a refined and timeless visual identity.

Best used for

  • Jewelry brand websites or luxury packaging
  • Spa or wellness center branding and digital presence
  • Minimalist art portfolios and exhibition designs
  • High-end interior design concepts and visualizations
  • Mobile app interfaces focused on cleanliness and subtlety
  • Corporate identity for luxury services or consulting firms

Suggested color roles

primary

#4D4D4D serves as a solid, grounding base, like the core of the quartz, ideal for primary backgrounds or strong elements.

secondary

#696969 provides a versatile mid-tone, excellent for secondary sections, cards, or subtle content divisions.

accent

#A9A9A9 offers a light, ethereal accent, perfect for subtle highlights, borders, or text on darker grays.

background

Use #A9A9A9 for a lighter, ethereal feel, or #4D4D4D for a deeper, grounded base. Both offer sophisticated canvases.

text

#4D4D4D is ideal for dark text on light backgrounds like #A9A9A9. Conversely, #A9A9A9 ensures clear readability when used as light text on dark backgrounds.

Accessibility notes

  • #4D4D4D on #A9A9A9 provides good contrast, ensuring readability for most text sizes.
  • Be cautious when using #778899 (Light Slate Gray) as text on #A9A9A9, as contrast may be low; opt for larger text or a more distinct contrast.
  • Ensure interactive elements are clearly distinguishable, as the palette's subtlety can inadvertently reduce visibility.
  • For optimal readability, ensure a clear distinction in lightness between text and background colors, especially across the mid-tones.

Recommended combinations

Deep Stone

Creates a strong, progressive dark aesthetic, ideal for establishing depth in UI elements or background layers, like stone strata.

#4D4D4D · #5A5A5A · #696969

Subtle Translucence

Offers a soft, seamless transition between tones, perfect for subtle background gradients or layered visual effects evoking translucence.

#696969 · #778899 · #A9A9A9

Ethereal Light

Delivers a clean, breathable aesthetic with a lighter touch, suitable for minimalist layouts where a sense of openness is desired.

#5A5A5A · #778899 · #A9A9A9

CSS variables

:root {
  --smoky-quartz-2-1: #A9A9A9;
  --smoky-quartz-2-2: #778899;
  --smoky-quartz-2-3: #696969;
  --smoky-quartz-2-4: #5A5A5A;
  --smoky-quartz-2-5: #4D4D4D;
}

Tailwind config

theme: {
  extend: {
    colors: {
      "smoky-quartz-2": {
        1: "#A9A9A9",
        2: "#778899",
        3: "#696969",
        4: "#5A5A5A",
        5: "#4D4D4D",
      }
    }
  }
}

Related searches

smoky quartz colorsmineral inspired palettesophisticated grey schemesubtle neutral tonesminimalist stone palette

Palette colors

Hex values

Color 1#A9A9A9
·
Color 2#778899
·
Color 3#696969
·
Color 4#5A5A5A
·
Color 5#4D4D4D
·

Accessibility

Contrast checker

1
2
3
4
5
1
1.5:1Fail
2.3:1Fail
2.9:1Fail
3.6:1AA18
2
1.5:1Fail
1.5:1Fail
1.9:1Fail
2.3:1Fail
3
2.3:1Fail
1.5:1Fail
1.3:1Fail
1.5:1Fail
4
2.9:1Fail
1.9:1Fail
1.3:1Fail
1.2:1Fail
5
3.6:1AA18
2.3:1Fail
1.5:1Fail
1.2:1Fail

Similar palettes

More like Smoky Quartz

View all neutral
Moonlit Canyon Stone
Moonstone Orb Glimmer
Schist Vein
Slate Cavern
Smoky Quartz
Stone Grotto Mist