Rose Quartz Color Psychology & Meaning
Rose quartz is the crystal of gentle love — these specific pinks are the color of the translucent mineral at different thicknesses, from pale blush to deep dusty rose.
#F5E8F0
#E8B8D0
#C088A8
#7A4060
Background
Primary Accent
Secondary
Body Text
Rose Quartz
richbeautifulpremium all brandingluxury
AA
WCAG Grade
6.5:1
Contrast Ratio
2,100
Saves
5,700
AI Copies
Use #F5E8F0 as background. Use #E8B8D0 as primary accent. Use #C088A8 as secondary. Use #7A4060 as body text.
Hex Codes, RGB & CMYK Color Values
Technical breakdown for the Rose Quartz color scheme. Use these values for web design (HEX/RGB), print projects (CMYK), or specialized design software (HSL).
| Swatch | Design Role | HEX | RGB | CMYK | HSL |
|---|---|---|---|---|---|
| Background Luminance: 83.4% | 245, 232, 240 | 0%, 5%, 2%, 4% | 323°, 39%, 94% | ||
| Primary Accent Luminance: 56.0% | 232, 184, 208 | 0%, 21%, 10%, 9% | 330°, 51%, 82% | ||
| Secondary Luminance: 31.6% | 192, 136, 168 | 0%, 29%, 13%, 25% | 326°, 31%, 64% | ||
| Body Text Luminance: 8.6% | 122, 64, 96 | 0%, 48%, 21%, 52% | 327°, 31%, 36% |
Color Harmony: Analogous Scheme
The Rose Quartz palette is built using a analogous relationship between its hues. This ensures that even with high-contrast accents, the overall scheme feels balanced and intentional.
Hue Wheel
A analogous palette is often preferred by professional designers because it creates a calm, serene atmosphere by using neighboring colors.
History & Design Context
Rose quartz became a cultural phenomenon after Pantone named it co-Color of the Year (with Serenity blue) in 2016. Its wellness associations have made it a fixture in beauty and spiritual branding.
Best Design Use Cases
Lightest blush for surfaces. Soft rose for cards. Mid rose for interactive. Deep mauve-rose for text.
Industries This Palette Suits
Wellness, beauty, crystal brands, spiritual goods, feminine luxury.
How to Implement the Rose Quartz Color Scheme
To use this Rose Quartz color palette in your web project, you can copy the following CSS variables or Tailwind CSS configuration. These roles ensure your UI maintains accessibility and visual hierarchy.
Option 1: CSS Variables
:root {
/* {name} Palette - ihatecolors.com */{'
'} --color-bg: {colors[0]};{'
'} --color-primary: {colors[1]};{'
'} --color-secondary: {colors[2]};{'
'} --color-text: {colors[3]};{'
'} {'}'}Web Design Tip
Use #F5E8F0 for the main background and #E8B8D0 for primary buttons. This creates a high-contrast focal point.
Accessibility Note
The contrast ratio between #7A4060 and #F5E8F0 is 6.48:1 (AA). Ensure your body text remains legible.