Palette

Smoky Quartz Aura

The grounding and mysterious energy of a faceted smoky quartz crystal, understated yet deep.

neutralelegant5 colors

More neutral palettes

Preview

See it in context.

Interface

New

Ready when you are.

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

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

Data visualization

#4E4742#776F68#9E958C#B2A7A0#6D6661

Palette guide

How to use Smoky Quartz Aura

Overview

The Smoky Quartz Aura palette grounds designs with its rich, earthy tones, reminiscent of a natural stone's deep beauty. This sophisticated collection features a dark, mysterious brown-grey #4E4742, a medium, warm grey #776F68, and a lighter, inviting taupe #9E958C. Further enhancing its versatility are the soft, almost rosy beige #B2A7A0 and a balanced, deeper grey-brown #6D6661. Ideal for conveying stability, warmth, and understated luxury, this palette is excellent for branding, web interfaces, and print materials that require a natural, yet refined aesthetic. Designers and developers can use these hex codes to create cohesive and elegant user experiences.

Best used for

Luxury product packaging
High-end furniture and interior design
Branding for artisanal goods
Sophisticated corporate websites
Editorial design with a natural theme
Digital interfaces requiring warmth and elegance

Suggested color roles

primary

Utilize #6D6661 as a primary anchor, offering a balanced and grounding presence for main content blocks or navigation.

secondary

Employ #776F68 for secondary information, subheadings, or background elements that need to feel integrated yet distinct.

accent

Use #4E4742 for strong accents like call-to-action buttons or important highlights, providing depth and impact.

background

Apply #B2A7A0 as a soft, warm background, creating an inviting and sophisticated canvas for content.

text

For body text on light backgrounds like #B2A7A0, #4E4742 ensures excellent readability. For text over #776F68, consider a very dark charcoal or black.

Accessibility notes

Check contrast for #4E4742 text on #B2A7A0 to meet WCAG AA standards, especially for small font sizes.
Be cautious when pairing #9E958C with #B2A7A0 for text, as their proximity in lightness might result in insufficient contrast.
Ensure interactive elements like buttons have clear visual states (hover, focus) that provide sufficient contrast against their background.
For users with color vision deficiencies, provide alternative indicators for information conveyed solely by color.

Recommended combinations

Earthy Foundation

Creates a gentle, cohesive base for websites or print materials, offering a sense of calm and natural warmth.

#B2A7A0 · #9E958C · #776F68

Deep Contrast

Perfect for ensuring high readability of text and strong visual hierarchy on light backgrounds.

#B2A7A0 · #4E4742 · #6D6661

Subtle Depth

Ideal for creating a moody, sophisticated look for headers, footers, or background sections that require depth.

#776F68 · #6D6661 · #4E4742

CSS variables

:root {
  --smoky-quartz-aura-1: #4E4742;
  --smoky-quartz-aura-2: #776F68;
  --smoky-quartz-aura-3: #9E958C;
  --smoky-quartz-aura-4: #B2A7A0;
  --smoky-quartz-aura-5: #6D6661;
}

Tailwind config

theme: {
  extend: {
    colors: {
      "smoky-quartz-aura": {
        1: "#4E4742",
        2: "#776F68",
        3: "#9E958C",
        4: "#B2A7A0",
        5: "#6D6661",
      }
    }
  }
}

Hex values

Color 1#4E4742

Color 2#776F68

Color 3#9E958C

Color 4#B2A7A0

Color 5#6D6661

Accessibility

Contrast checker

1.8:1Fail

3.1:1AA18

3.9:1AA18

1.6:1Fail

1.8:1Fail

1.7:1Fail

2.1:1Fail

1.1:1Fail

3.1:1AA18

1.7:1Fail

1.3:1Fail

1.9:1Fail

3.9:1AA18

2.1:1Fail

1.3:1Fail

2.4:1Fail

1.6:1Fail

1.1:1Fail

1.9:1Fail

2.4:1Fail

Similar palettes

More like Smoky Quartz Aura