Palette

Smoky Quartz Hues

Subtle, earthy grays and browns mimicking the delicate, layered shades found in 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 Hues 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 Hues.

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

Data visualization

#D9C7C0#A68E86#735B53#4C3730#F2EBE8

Palette guide

How to use Smoky Quartz Hues

Overview

The Smoky Quartz Hues palette captures the delicate, layered shades of natural smoky quartz with a beautiful blend of earthy greys and warm browns. This sophisticated collection features a soft, almost rosy beige #D9C7C0, a medium taupe #A68E86, and a rich, grounding brown #735B53. Anchored by a deep, dark brown #4C3730 and brightened by a near-white #F2EBE8, it offers versatility for elegant and minimal designs. Ideal for conveying warmth, authenticity, and refined natural beauty, this palette is excellent for high-end branding, cozy digital interfaces, or sophisticated editorial content. Designers and developers can leverage these hex codes for cohesive and inviting visual experiences.

Best used for

High-end cosmetic or skincare branding
Artisan craft and natural product packaging
Cozy interior design concepts
Minimalist lifestyle blogs
Elegant wedding stationery
Sophisticated e-commerce websites

Suggested color roles

primary

Utilize #A68E86 as a versatile primary color for main content areas, offering a warm and approachable foundation.

secondary

Apply #D9C7C0 for secondary information, subtle backgrounds, or accents that require a soft touch.

accent

Employ #4C3730 sparingly for strong headings, call-to-action buttons, or critical icons, providing deep contrast and impact.

background

Use #F2EBE8 as a clean, near-white background, perfect for creating an airy and elegant canvas.

text

For primary body text on #F2EBE8, #4C3730 ensures excellent readability. For text on #D9C7C0, a darker brown like #735B53 provides good contrast.

Accessibility notes

Ensure #4C3730 text on #F2EBE8 background meets WCAG AAA contrast standards for small text.
Be cautious when pairing #D9C7C0 with #F2EBE8 for text or interactive elements, as contrast will be very low.
For data visualization, ensure sufficient contrast between adjacent shades like #A68E86 and #735B53.
Provide alternative text descriptions for images where color alone conveys important information.

Recommended combinations

Warm & Light

Creates a soft, inviting, and elegant base for web pages, bridal themes, or minimalist branding.

#F2EBE8 · #D9C7C0 · #A68E86

Rich Contrast

Effective for strong text hierarchy, prominent calls-to-action, and deep visual anchors on a light background.

#F2EBE8 · #4C3730 · #735B53

Earthy Depth

Ideal for creating a sophisticated, layered look for headers, footers, or UI elements, evoking natural richness.

#A68E86 · #735B53 · #4C3730

CSS variables

:root {
  --smoky-quartz-hues-1: #D9C7C0;
  --smoky-quartz-hues-2: #A68E86;
  --smoky-quartz-hues-3: #735B53;
  --smoky-quartz-hues-4: #4C3730;
  --smoky-quartz-hues-5: #F2EBE8;
}

Tailwind config

theme: {
  extend: {
    colors: {
      "smoky-quartz-hues": {
        1: "#D9C7C0",
        2: "#A68E86",
        3: "#735B53",
        4: "#4C3730",
        5: "#F2EBE8",
      }
    }
  }
}

Hex values

Color 1#D9C7C0

Color 2#A68E86

Color 3#735B53

Color 4#4C3730

Color 5#F2EBE8

Accessibility

Contrast checker

1.9:1Fail

3.8:1AA18

6.8:1AA

1.4:1Fail

1.9:1Fail

2:1Fail

3.6:1AA18

2.6:1Fail

3.8:1AA18

2:1Fail

1.8:1Fail

5.3:1AA

6.8:1AA

3.6:1AA18

1.8:1Fail

9.4:1AAA

1.4:1Fail

2.6:1Fail

5.3:1AA

9.4:1AAA

Similar palettes

More like Smoky Quartz Hues

Ancient Temple Stones

Calm Stone Pathway

Metro Grid Hues