Back to palettes

Palette

Smoky Quartz

A refined blend of soft grays, reflecting the subtle translucence of a smoky quartz crystal.

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

#717277#9B9CA0#B3B4B7#CCCED0#EAEBEC

Palette guide

How to use Smoky Quartz

Overview

The Smoky Quartz palette presents a refined blend of soft, cool greys, meticulously chosen to reflect the subtle translucence and polished elegance of a smoky quartz crystal. Ranging from a versatile medium grey #717277 to a delicate, near-white #EAEBEC, this collection offers a harmonious gradient. Intermediate shades like #9B9CA0, #B3B4B7, and #CCCED0 provide smooth transitions and depth. This palette is ideal for designs that aim for a clean, professional, and understated aesthetic, perfect for corporate branding, minimalist UI/UX, and high-tech product interfaces. Designers and developers can leverage these hex codes to create serene, accessible, and timeless visual experiences.

Best used for

  • Corporate and professional websites
  • Clean and minimalist app interfaces
  • High-tech product design
  • Modern architectural presentations
  • Subtle luxury branding
  • Scientific or data-heavy dashboards

Suggested color roles

primary

Utilize #717277 as a foundational primary color for main content areas or background panels, offering a stable and cool presence.

secondary

Apply #9B9CA0 for secondary information, subtle dividers, or background elements, maintaining a cohesive and light feel.

accent

While no dark accent is provided, a true black or dark charcoal can be used for strong accents against lighter shades for maximum impact.

background

Use #EAEBEC as a clean, bright, and airy background, ideal for creating a spacious and modern canvas.

text

For primary body text on #EAEBEC, a dark charcoal or black ensures excellent readability. For text on #B3B4B7, a darker grey like #717277 provides good contrast.

Accessibility notes

  • Ensure dark text (e.g., black) on #EAEBEC background meets WCAG AAA contrast standards.
  • Be cautious when pairing lighter greys like #CCCED0 or #B3B4B7 for text on #EAEBEC, as contrast will likely be insufficient.
  • Provide clear focus states and visual indicators for interactive elements beyond just color changes.
  • For data visualization, ensure sufficient contrast between adjacent grey shades for clarity.

Recommended combinations

Light & Polished

Creates a very clean, spacious, and modern base for web pages, dashboards, or minimalist designs.

#EAEBEC · #CCCED0 · #B3B4B7

Subtle Depth

Ideal for adding understated depth to UI elements, headers, or background sections without harshness.

#9B9CA0 · #717277 · #CCCED0

Text Contrast

Provides a clear background for readable text with a slightly darker, supportive secondary color.

#EAEBEC · #717277 · #9B9CA0

CSS variables

:root {
  --smoky-quartz-1: #717277;
  --smoky-quartz-2: #9B9CA0;
  --smoky-quartz-3: #B3B4B7;
  --smoky-quartz-4: #CCCED0;
  --smoky-quartz-5: #EAEBEC;
}

Tailwind config

theme: {
  extend: {
    colors: {
      "smoky-quartz": {
        1: "#717277",
        2: "#9B9CA0",
        3: "#B3B4B7",
        4: "#CCCED0",
        5: "#EAEBEC",
      }
    }
  }
}

Related searches

light grey neutral palettepolished stone color schemesubtle grey gradientminimalist cool tonesserene professional grey

Palette colors

Hex values

Color 1#717277
·
Color 2#9B9CA0
·
Color 3#B3B4B7
·
Color 4#CCCED0
·
Color 5#EAEBEC
·

Accessibility

Contrast checker

1
2
3
4
5
1
1.7:1Fail
2.3:1Fail
3:1AA18
4:1AA18
2
1.7:1Fail
1.3:1Fail
1.7:1Fail
2.3:1Fail
3
2.3:1Fail
1.3:1Fail
1.3:1Fail
1.7:1Fail
4
3:1AA18
1.7:1Fail
1.3:1Fail
1.3:1Fail
5
4:1AA18
2.3:1Fail
1.7:1Fail
1.3:1Fail

Similar palettes

More like Smoky Quartz

View all neutral
Smoky Quartz
Abstract Sandstone Art
Minimalist Zen Calm
Moonlit Canyon Stone
Moonstone Orb Glimmer
Schist Vein