Back to palettes

Palette

Smoky Quartz Elegance

Sophisticated shades of smoky gray, mimicking the understated beauty of quartz.

monochromeelegant5 colors
More monochrome palettes

Preview

See it in context.

Interface

New

Ready when you are.

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

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

Data visualization

#4A4A4A#6C6C6C#909090#B8B8B8#DCDCDC

Palette guide

How to use Smoky Quartz Elegance

Overview

The Smoky Quartz Elegance palette offers a refined monochrome gradient, providing a sophisticated range of greys from deep charcoal to soft light tones. With #4A4A4A as a strong foundation, progressing through versatile mid-greys like #6C6C6C and #909090, and culminating in the airy #B8B8B8 and #DCDCDC, this palette perfectly mimics the understated beauty of quartz. It's an excellent choice for designs requiring a clean, professional, and timeless aesthetic, suitable for corporate branding, elegant web interfaces, or high-end product showcases. Designers and developers can utilize these hex codes to create harmonious, accessible, and modern visual experiences with ease.

Best used for

  • Professional corporate websites
  • Elegant UI/UX design
  • High-end product photography backdrops
  • Minimalist branding and logos
  • Architectural renderings
  • Sophisticated editorial layouts

Suggested color roles

primary

Use #6C6C6C as a versatile primary color for main content areas, providing a balanced and professional foundation.

secondary

Apply #909090 for secondary information, subtle dividers, or background elements, maintaining a harmonious flow.

accent

Employ #4A4A4A sparingly for strong headings, call-to-action buttons, or critical icons, ensuring maximum impact.

background

Utilize #DCDCDC as a clean, bright background for content, creating an open and modern aesthetic.

text

For primary body text on #DCDCDC, #4A4A4A ensures excellent readability. For text on #B8B8B8, a darker grey like #6C6C6C provides sufficient contrast.

Accessibility notes

  • Ensure #4A4A4A text on #DCDCDC background meets WCAG AA standards for small text and AAA for large text.
  • Be cautious with #B8B8B8 or #909090 as text colors on light backgrounds, as contrast may be insufficient.
  • Provide clear visual cues for interactive elements, such as hover states, beyond just color differentiation.
  • For data visualization, ensure different shades are distinct enough for users with various forms of color blindness.

Recommended combinations

Light & Clean

Ideal for creating a spacious, minimalist feel for web pages, portfolios, or clean interfaces.

#DCDCDC · #B8B8B8 · #909090

Bold & Clear

Effective for establishing strong text hierarchy and prominent calls-to-action on a bright background.

#DCDCDC · #4A4A4A · #6C6C6C

Subtle Depth

Useful for layering UI elements, headers, or footers where a sophisticated, understated depth is desired.

#6C6C6C · #909090 · #4A4A4A

CSS variables

:root {
  --smoky-quartz-elegance-1: #4A4A4A;
  --smoky-quartz-elegance-2: #6C6C6C;
  --smoky-quartz-elegance-3: #909090;
  --smoky-quartz-elegance-4: #B8B8B8;
  --smoky-quartz-elegance-5: #DCDCDC;
}

Tailwind config

theme: {
  extend: {
    colors: {
      "smoky-quartz-elegance": {
        1: "#4A4A4A",
        2: "#6C6C6C",
        3: "#909090",
        4: "#B8B8B8",
        5: "#DCDCDC",
      }
    }
  }
}

Related searches

elegant grey palettesophisticated charcoal schememinimalist neutral colorsstone effect greymodern monochrome design

Palette colors

Hex values

Color 1#4A4A4A
·
Color 2#6C6C6C
·
Color 3#909090
·
Color 4#B8B8B8
·
Color 5#DCDCDC
·

Accessibility

Contrast checker

1
2
3
4
5
1
1.7:1Fail
2.8:1Fail
4.5:1AA18
6.5:1AA
2
1.7:1Fail
1.6:1Fail
2.6:1Fail
3.8:1AA18
3
2.8:1Fail
1.6:1Fail
1.6:1Fail
2.3:1Fail
4
4.5:1AA18
2.6:1Fail
1.6:1Fail
1.4:1Fail
5
6.5:1AA
3.8:1AA18
2.3:1Fail
1.4:1Fail

Similar palettes

More like Smoky Quartz Elegance

View all monochrome
Ancient Marble Column
Ancient Stone Keep
Ancient Marble Relic
Ancient Marble Statue
Ancient Marble Temple
Gothic Library Ink