Quartz

HEX: #51484F | Modern Palette

On White
8.79:1
PASS
On Black
2.39:1
FAIL

Color Specifications

HEX
#51484F
RGB
81, 72, 79
HSL
313°, 11% ,31%
CMYK
0, 11.11, 2.47, 68.24

About Quartz

Quartz (#51484F) is a color with RGB(81, 72, 79) and HSL(313.33°, 11.11%, 31.76%). In design, it fits Muted, Warm styles and is suitable for Text, Background, Border. Its complementary color is #48514A, which creates strong contrast. Its triadic palette includes #4F5148 and #484F51. The name comes from Quarz (German).

  • HEX: #51484F
  • RGB: 81, 72, 79
  • HSL: 313.33°, 11.11%, 31.76%
  • Style: Muted, Warm
  • Use case: Text, Background, Border
  • Complementary color: #48514A
  • Triadic colors: #4F5148, #484F51
  • The name comes from Quarz (German).

Live Components

LIGHT
DARK
System Notification Box

Color Palettes

Monochromatic Five tones of the same hue — a reliable scale for backgrounds, surfaces, and text.
Neutral + Accent Four near-neutral tones grounded by a saturated accent — clean and versatile for UI.
Analogous Five hues drifting across a 60° arc — naturally harmonious and pleasing to the eye.
3 + 1 + 1 Three analogous base colors, one complementary accent, one dark anchor — bold yet balanced.

Color Harmonies

Complementary

The color directly opposite on the color wheel — creates maximum contrast and vibrance.

Analogous

Colors adjacent on the wheel — naturally harmonious and pleasing to the eye.

Triadic

Three colors equally spaced 120° apart — bold, balanced, and visually rich.

Split-Complementary

Two colors flanking the complement — high contrast with less tension than full complementary.

Tetradic (Square)

Four colors at 90° intervals — rich variety, best when one color dominates.

Monochromatic

Shades and tints of the same hue — cohesive, elegant, and easy to work with.

Shades & Tints

A seamless scale of #51484F from deepest shade to lightest tint.

Color Characteristics

Mood
Style
Muted Warm
Use case
Text Background Border

Accessibility Simulation

Deuteranopia #4B4B4F
Protanopia #49494F
Tritanopia #504949
Achromatopsia #4B4B4B

Frequently Asked Questions

Quartz (#51484F) is a color with RGB(81, 72, 79) and HSL(313.33°, 11.11%, 31.76%).

#51484F pairs strongly with #48514A as its complementary color. It can also be used with neutral tones for balanced UI and design layouts.

#51484F is suitable for Text, Background, Border and works well with Muted, Warm styles.

The name Quartz is linked to Quarz from German, meaning Uncertain, possibly from an old mining term.

Name, History & Etymology

Origin Word Quarz
Meaning Uncertain, possibly from an old mining term
Language German
First Recorded Use 16th Century

History

The word 'Quarz' was first documented by the German metallurgist Georgius Agricola in his seminal work 'De re metallica' in 1546. He used it to refer to a specific type of mineral found in ore veins. Before this, various local mining terms might have been used. The term gained wider scientific acceptance as mineralogy developed. Its etymology is debated, with theories suggesting it comes from a Slavic word for 'hard' or an old German mining term related to 'cross-vein' or 'tough'.

First Recorded Use

Georgius Agricola's 'De re metallica' (1546)

Cultural Associations

Quartz is one of the most common minerals on Earth and has been used by humans for millennia. Historically, it was used for tools (e.g., flint, chert), and its piezoelectric properties (discovered in the late 19th century) made it crucial for electronics, particularly in watches, radios, and computers for precise timing. Various forms of quartz, like amethyst, citrine, and rose quartz, are popular as gemstones and have been attributed with various mystical or healing properties in different cultures, though these are not scientifically supported. Its abundance and versatility have made it a significant material in both practical and decorative applications across many civilizations.

Similar Named Colors
Liver #534B4F ΔE 1.99
Purple Taupe #50404D ΔE 4.89
Wenge #645452 ΔE 7.14
Dark Puce #4F3A3C ΔE 7.15

Code Snippets

/* Background */
.element {
    background-color: #51484F;
}

/* Text */
.element {
    color: #51484F;
}

/* Border */
.element {
    border: 1px solid #51484F;
}

/* Linear gradient to complementary */
.element {
    background: linear-gradient(
        to right,
        #51484F,
        #485A4C
    );
}

/* Radial gradient */
.element {
    background: radial-gradient(
        circle,
        #51484F,
        #485A4C
    );
}

// SCSS variable
$quartz: #51484F;

// With RGB channels (useful for rgba() usage)
$quartz-r: 81;
$quartz-g: 72;
$quartz-b: 79;

// Usage
.element {
    background-color: $quartz;
    color: rgba($quartz-r, $quartz-g, $quartz-b, 0.8);
}