Smoky Quartz color palette
Like the brown crystal it's named after, Smoky Quartz runs from a smoky dark brown, #4E342E, through cocoa and taupe to ashy rose #BCAAA4 and a pale ash, #EFEBE9. A faint pink undertone keeps the browns from looking muddy. It's understated and polished, closer to a leather watch strap than a coffee shop. Jewelers and menswear brands can use it to look quietly expensive.
Smoky Quartz palette in use
The core pairing is #4E342E text on #EFEBE9. #6D4C41 works for buttons and the nav bar, #BCAAA4 for borders and dividers, and #8D6E63 for icons and hover states.
This pair measures 9.56:1, so it works for body text too. The button uses #6D4C41 with white text.
ButtonGood for
- Jewelry brand website
- Menswear lookbook
- Therapist practice site
- Editorial blog theme
Readable color pairs
Pairs from this palette with at least 3:1 contrast (WCAG 2). Use AA and AAA pairs for body text, and AA large pairs for headings 24px and up.
| Text | Background | Ratio | Rating |
|---|---|---|---|
#4E342E | #EFEBE9 | 9.56:1 | AAA |
#6D4C41 | #EFEBE9 | 6.42:1 | AA |
#4E342E | #BCAAA4 | 5.08:1 | AA |
#8D6E63 | #EFEBE9 | 3.90:1 | AA large |
#6D4C41 | #BCAAA4 | 3.41:1 | AA large |
Smoky Quartz palette as code
CSS variables
:root {
--smoky-quartz-1: #4E342E;
--smoky-quartz-2: #6D4C41;
--smoky-quartz-3: #8D6E63;
--smoky-quartz-4: #BCAAA4;
--smoky-quartz-5: #EFEBE9;
}Tailwind v4
@theme {
--color-smoky-quartz-1: #4E342E;
--color-smoky-quartz-2: #6D4C41;
--color-smoky-quartz-3: #8D6E63;
--color-smoky-quartz-4: #BCAAA4;
--color-smoky-quartz-5: #EFEBE9;
}Tailwind v3
// tailwind.config.js → theme.extend.colors
'smoky-quartz': {
100: '#4E342E',
200: '#6D4C41',
300: '#8D6E63',
400: '#BCAAA4',
500: '#EFEBE9',
},SCSS
$smoky-quartz-1: #4E342E;
$smoky-quartz-2: #6D4C41;
$smoky-quartz-3: #8D6E63;
$smoky-quartz-4: #BCAAA4;
$smoky-quartz-5: #EFEBE9;JSON
["#4E342E","#6D4C41","#8D6E63","#BCAAA4","#EFEBE9"]Named colors in this palette
The nearest named color to each swatch, with its meaning and matching colors.