Back to palettes

Palette

Mystic Quartz Haze

A sophisticated monochrome palette, transitioning from deep charcoal to misty silver, like a smoky quartz crystal.

monochromeelegant5 colors
More monochrome palettes

Preview

See it in context.

Interface

New

Ready when you are.

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

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

Data visualization

#2B2B2B#4F4F4F#7B7B7B#AFAFAF#D7D7D7

Palette guide

How to use Mystic Quartz Haze

Overview

The Mystic Quartz Haze palette is a sophisticated monochrome collection, transitioning from deep charcoal to misty silver, like a smoky quartz crystal. Ranging from the profound #2B2B2B and #4F4F4F to the balanced #7B7B7B, #AFAFAF, and the luminous #D7D7D7, this palette offers an elegant and timeless aesthetic. Designers and developers can leverage these shades to create clean, modern, and minimalist digital experiences. The subtle variations in tone provide ample opportunity for depth and visual hierarchy without relying on strong color contrasts, making it ideal for professional UI, sophisticated branding, or projects that require a sense of quiet strength and refined simplicity. It's truly a versatile and elegant choice.

Best used for

  • Corporate or professional website designs
  • Luxury product packaging or branding
  • Minimalist app interfaces
  • Architectural visualization or portfolios
  • High-end editorial or publishing layouts
  • Automotive or technology brand websites

Suggested color roles

primary

Use #2B2B2B as a deep, anchoring primary for backgrounds, important text, or robust UI elements, providing strong gravitas.

secondary

Apply #4F4F4F for subheadings, navigation, or subtle dividers, offering a harmonious mid-tone with depth.

accent

Utilize #AFAFAF as a subtle accent for interactive elements, icons, or soft highlights, adding a gentle lift.

background

Employ #D7D7D7 as a clean, light background for content areas, ensuring readability and an airy, modern feel.

text

For optimal readability on lighter backgrounds, #2B2B2B provides excellent contrast. For darker shades, use #D7D7D7 or white.

Accessibility notes

  • Ensure sufficient contrast when using #7B7B7B for text on #AFAFAF; consider larger font sizes or bolder weights.
  • #2B2B2B offers excellent contrast against #D7D7D7 for primary text, meeting WCAG AA standards.
  • Avoid using #AFAFAF for small text on #D7D7D7 to prevent low readability; check contrast ratios carefully.
  • For critical information, always pair a dark color like #2B2B2B with the lightest available background #D7D7D7.

Recommended combinations

Smoky Depth

Creates a strong, dark base with a bright contrast, ideal for structured layouts and clear content presentation.

#2B2B2B · #4F4F4F · #D7D7D7

Quartz Layers

Perfect for subtle gradients or layered UI elements, mimicking the gradual transitions of a polished stone.

#4F4F4F · #7B7B7B · #AFAFAF

Modern Contrast

Combines a powerful primary with a light background and a gentle accent for sophisticated, understated designs.

#2B2B2B · #D7D7D7 · #AFAFAF

CSS variables

:root {
  --mystic-quartz-haze-1: #2B2B2B;
  --mystic-quartz-haze-2: #4F4F4F;
  --mystic-quartz-haze-3: #7B7B7B;
  --mystic-quartz-haze-4: #AFAFAF;
  --mystic-quartz-haze-5: #D7D7D7;
}

Tailwind config

theme: {
  extend: {
    colors: {
      "mystic-quartz-haze": {
        1: "#2B2B2B",
        2: "#4F4F4F",
        3: "#7B7B7B",
        4: "#AFAFAF",
        5: "#D7D7D7",
      }
    }
  }
}

Related searches

monochrome gray palettesmoky quartz colorselegant dark gray UI schememinimalist web design hexsophisticated neutral tones

Palette colors

Hex values

Color 1#2B2B2B
·
Color 2#4F4F4F
·
Color 3#7B7B7B
·
Color 4#AFAFAF
·
Color 5#D7D7D7
·

Accessibility

Contrast checker

1
2
3
4
5
1
1.7:1Fail
3.3:1AA18
6.5:1AA
9.8:1AAA
2
1.7:1Fail
1.9:1Fail
3.7:1AA18
5.7:1AA
3
3.3:1AA18
1.9:1Fail
1.9:1Fail
2.9:1Fail
4
6.5:1AA
3.7:1AA18
1.9:1Fail
1.5:1Fail
5
9.8:1AAA
5.7:1AA
2.9:1Fail
1.5:1Fail

Similar palettes

More like Mystic Quartz Haze

View all monochrome
Smoky Quartz Elegance
Ancient Marble Column
Ancient Stone Keep
Smoky Quartz Elegance
Smoky Quartz Haze
Ancient Marble Relic