Rose Quartz

HEX: #AA98A9 | Modern Palette

On White
2.70:1
FAIL
On Black
7.77:1
PASS

Color Specifications

HEX
#AA98A9
RGB
170, 152, 169
HSL
303°, 9% ,63%
CMYK
0, 11, 1, 33

About Rose Quartz

Rose Quartz (#AA98A9) is a color with RGB(170, 152, 169) and HSL(303.3°, 9.6%, 63.1%). It is commonly associated with Minimal moods. In design, it fits Monochrome, Muted styles and is suitable for Text, Background, Border. Its complementary color is #98AA99, which creates strong contrast. Its triadic palette includes #A9AA98 and #98A9AA. The name comes from Rose Quartz (English).

  • HEX: #AA98A9
  • RGB: 170, 152, 169
  • HSL: 303.3°, 9.6%, 63.1%
  • Mood: Minimal
  • Style: Monochrome, Muted
  • Use case: Text, Background, Border
  • Complementary color: #98AA99
  • Triadic colors: #A9AA98, #98A9AA
  • The name comes from Rose Quartz (English).

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 #AA98A9 from deepest shade to lightest tint.

Color Characteristics

Accessibility Simulation

Deuteranopia #9D9DA9
Protanopia #9A9AA9
Tritanopia #A89A9A
Achromatopsia #9D9D9D

Frequently Asked Questions

Rose Quartz (#AA98A9) is a color with RGB(170, 152, 169) and HSL(303.3°, 9.6%, 63.1%).

#AA98A9 pairs strongly with #98AA99 as its complementary color. It can also be used with neutral tones for balanced UI and design layouts.

#AA98A9 is suitable for Text, Background, Border and works well with Monochrome, Muted styles.

#AA98A9 is commonly associated with Minimal.

The name Rose Quartz is linked to Rose Quartz from English, meaning A pink variety of quartz, named for its rose-like color..

Name, History & Etymology

Origin Word Rose Quartz
Meaning A pink variety of quartz, named for its rose-like color.
Language English
First Recorded Use Ancient

History

Rose Quartz has been valued for millennia. Ancient Assyrians used it for jewelry. Romans and Egyptians believed it had healing powers and used it in cosmetics and for decorative purposes. In the Middle Ages, it was used in healing elixirs. Its popularity as a gemstone and ornamental stone has continued through modern times, often associated with love and relationships.

First Recorded Use

Evidence of use dates back to ancient civilizations (e.g., Assyrians, Romans, Egyptians) for jewelry, talismans, and decorative objects. The specific term 'Rose Quartz' in English likely became common as mineralogy developed.

Cultural Associations

Often referred to as the 'stone of universal love,' believed to restore trust and harmony in relationships, encouraging unconditional love. Thought to purify and open the heart at all levels to promote love, self-love, friendship, deep inner healing, and feelings of peace. Used in Feng Shui to attract love and enhance relationships, often placed in the southwest sector of a home or room. Associated with the heart chakra in various spiritual and healing practices.

Similar Named Colors

Pastel Purple #B39EB5 ΔE 3.19
Manatee #979AAA ΔE 9.16
Lilac #C8A2C8 ΔE 9.48
Tuscany #C09999 ΔE 9.65

Code Snippets

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

/* Text */
.element {
    color: #AA98A9;
}

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

/* Linear gradient to complementary */
.element {
    background: linear-gradient(
        to right,
        #AA98A9,
        #98AA99
    );
}

/* Radial gradient */
.element {
    background: radial-gradient(
        circle,
        #AA98A9,
        #98AA99
    );
}

// SCSS variable
$rose-quartz: #AA98A9;

// With RGB channels (useful for rgba() usage)
$rose-quartz-r: 170;
$rose-quartz-g: 152;
$rose-quartz-b: 169;

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