Palette

Smoky Quartz Haze

A refined range of smoky grays, inspired by the translucent beauty of quartz and morning mist.

monochromeelegant5 colors

More monochrome palettes

Preview

See it in context.

Interface

New

Ready when you are.

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

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

Data visualization

#4A4B4D#6D6E70#8F9092#B1B2B4#D3D4D6

Palette guide

How to use Smoky Quartz Haze

Overview

The Smoky Quartz Haze palette offers a refined spectrum of cool greys, capturing the subtle translucence of quartz infused with a hint of morning mist. Ranging from a deep, muted #4A4B4D to a soft, ethereal #D3D4D6, this monochrome collection provides inherent harmony and sophistication. Intermediate shades like #6D6E70, #8F9092, and #B1B2B4 ensure smooth transitions and versatility. This palette is ideal for designs aiming for a calm, professional, and contemporary aesthetic, perfect for tech interfaces, minimalist branding, or architectural presentations. Designers and developers will find these hex codes excellent for crafting clean, serene, and highly readable digital and print experiences.

Best used for

Modern tech interfaces and apps
Minimalist branding and corporate identity
Architectural and interior design portfolios
Scientific or medical presentations
Serene spa or wellness branding
Sophisticated editorial design

Suggested color roles

primary

Utilize #6D6E70 as a foundational primary color for main content areas, offering a balanced and cool professional feel.

secondary

Apply #8F9092 for secondary information, subtle dividers, or background elements, maintaining a cohesive and light tone.

accent

Employ #4A4B4D sparingly for impactful accents, strong headings, or call-to-action buttons, providing necessary depth and contrast.

background

Use #D3D4D6 as a clean, cool background, ideal for creating a spacious and modern canvas for content.

text

For primary body text on #D3D4D6, #4A4B4D ensures excellent readability. For text on #B1B2B4, a darker grey like #6D6E70 provides sufficient contrast.

Accessibility notes

Ensure #4A4B4D text on #D3D4D6 background meets WCAG AA contrast standards for small text and AAA for large text.
Be cautious when pairing #B1B2B4 or #8F9092 for text on #D3D4D6, as contrast might be insufficient.
Provide clear visual cues for interactive elements, such as hover states and outlines, to aid navigation.
For important information, avoid relying on subtle differences between lighter greys alone; ensure sufficient contrast.

Recommended combinations

Light & Airy

Creates an open, modern, and serene atmosphere for web pages, dashboards, or minimalist designs.

#D3D4D6 · #B1B2B4 · #8F9092

Clear Contrast

Effective for establishing strong visual hierarchy, clear text, and prominent calls-to-action.

#D3D4D6 · #4A4B4D · #6D6E70

Deep & Muted

Useful for adding sophisticated depth to UI components, footers, or background sections in a subtle way.

#6D6E70 · #4A4B4D · #8F9092

CSS variables

:root {
  --smoky-quartz-haze-1: #4A4B4D;
  --smoky-quartz-haze-2: #6D6E70;
  --smoky-quartz-haze-3: #8F9092;
  --smoky-quartz-haze-4: #B1B2B4;
  --smoky-quartz-haze-5: #D3D4D6;
}

Tailwind config

theme: {
  extend: {
    colors: {
      "smoky-quartz-haze": {
        1: "#4A4B4D",
        2: "#6D6E70",
        3: "#8F9092",
        4: "#B1B2B4",
        5: "#D3D4D6",
      }
    }
  }
}

Hex values

Color 1#4A4B4D

Color 2#6D6E70

Color 3#8F9092

Color 4#B1B2B4

Color 5#D3D4D6

Accessibility

Contrast checker

1.7:1Fail

2.7:1Fail

4.1:1AA18

5.9:1AA

1.7:1Fail

1.6:1Fail

2.4:1Fail

3.4:1AA18

2.7:1Fail

1.6:1Fail

1.5:1Fail

2.2:1Fail

4.1:1AA18

2.4:1Fail

1.5:1Fail

1.4:1Fail

5.9:1AA

3.4:1AA18

2.2:1Fail

1.4:1Fail

Similar palettes

More like Smoky Quartz Haze

View all monochrome

Smoky Quartz Elegance

Ancient Marble Column

Ancient Marble Statue

Ash Cloud Symphony

Gothic Library Ink

Mystic Quartz Haze