Rose quartz is a gentle, soothing pink that sits between pink and lavender on the color wheel. Its soft, muted hue feels calming and romantic. Related shades include blush and pastel pink. Use rose quartz in designs for a serene, comforting vibe.
Rose Quartz is defined by the following color codes and values to ensure consistency across various digital platforms and devices.
- Hex Code: #AA98A9
- RGB value: 66.7% red, 59.6% green, 66.3% blue
Accessibility considerations play a crucial role in UX and UI design color choices. Figma offers plugins in the Community to make sure your designs meet Web Content Accessibility Guidelines
For variations within the same spectrum as Rose Quartz, consider:
- Blush Pink (#ff7782): With its soft, pink hue, this color captures the gentle essence of Rose Quartz, maintaining its calming and delicate nature.
- Light Pink (#ffb5c0): This color shares a subtle, pastel quality similar to Rose Quartz, embracing a soothing and warm vibe.
- Pastel Pink (#ffc5d3): It reflects a light, airy feel akin to Rose Quartz, bringing out the tender, serene attributes.
- Soft Pink (#e89eb8): This shade mimics the gentle tranquility of Rose Quartz, utilizing a muted, peaceful tone.
To complement Rose Quartz, consider pairing it with:
- Emerald Green (#00674F): The vibrant green adds a striking contrast, enhancing Rose Quartz’s gentle warmth and creating a balanced, nature-inspired palette.
- Navy Blue (#000080): The deep blue offers a sophisticated backdrop, allowing Rose Quartz to stand out as a delicate accent.
- Mustard Yellow (#FFCE1B): This warm hue provides an energetic and contemporary contrast, making the soft pink tones of Rose Quartz more lively.
- Charcoal (#4A4A4A): A neutral, dark shade that makes Rose Quartz’s subtle color pop, creating a chic and modern look.
- Sage (#BBB791): This calming green-gray pairs well with Rose Quartz, providing an earthy, harmonious feel that emphasizes tranquility.
While Rose Quartz is a gentle and soothing hue, it may clash with:
- Neon Orange (#FF5C00): This bright, intense orange can overpower Rose Quartz, creating an aggressive contrast disrupting its tranquil nature.
- Neon Green (#2CFF05): The vivid, fluorescent quality of neon green can clash with the softness of Rose Quartz, resulting in a garish and unsettling combination.
- Crimson Red (#B22222): This deep, intense red can overshadow Rose Quartz, making the pairing feel heavy and unbalanced.
- Electric Blue (#00F0FF): With its vivid brightness, electric blue can starkly contrast Rose Quartz, leading to a jarring visual experience.
- Dark Purple (#341539): The rich, deep tone of dark purple can overshadow Rose Quartz, creating an imbalance that detracts from its light and peaceful quality.
Color variations
Shades
Tints
Tones
Hues
Color harmonies
Complementary
Split
Monochromatic
Analogous
Triadic
Square
Custom palettes
Dusty Plum
Lilac Zephyr
Muted Mosaic
Contrast checker
Contrast 2.7
- Large Text
#AA98A9
- Normal Text
How you design, align, and build matters. Do it together with Figma.
| Category | ||
|---|---|---|
Fail | Fail | |
Fail | Fail | |
Fail | Fail |
Contrast 7.77
- Large Text
#AA98A9
- Normal Text
How you design, align, and build matters. Do it together with Figma.
| Category | ||
|---|---|---|
Pass | Pass | |
Pass | Pass | |
Pass | Pass |
Color simulations
Protanopia
Deuteranopia
Tritanopia
Achromatopsia
The hexadecimal color #AA98A9, known as Rose Quartz, has RGB values of R:170, G:152, B:169 and CMYK values of C:0, M:11, Y:1, K:33.
| VALUE | CSS | |
|---|---|---|
| HEX | #AA98A9 | #AA98A9 |
| RGB DECIMAL | 170, 152, 169 | RGB(170,152,169) |
| RGB PERCENTAGE | 66.7, 59.6, 66.3 | RGB(66.7%,59.6%,66.3%) |
| CMYK | 0, 11, 1, 33 | |
| HSL | HSL(303.3, 9.6%, 63.1%) | HSL(303.3, 9.6%, 63.1%) |
| HSV (OR HSB) | 303.3°, 10.6, 66.7 | |
| WEB SAFE | #153153153 | #153153153 |
| BINARY | 10101010, 10011000, 10101001 | |
| iOS - SwiftUI | Color(red: 0.667, green: 0.596, blue: 0.663) | |
| iOS - UIKit | UIColor(red: 0.667, green: 0.596, blue: 0.663, alpha: 1) | |
| Android - Compose | Color(0xFFAA98A9) |
