Palette
Gentle and soft, like the delicate, loving glow of rose quartz under a soft light.
Preview
Interface
A quick look at how Rose Quartz Radiance reads on buttons, badges, and alerts before you commit.
Marketing banner
A bolder treatment that stretches the primary and secondary colors across a full gradient banner.
Data visualization
Palette guide
The "Rose Quartz Radiance" palette is gentle and soft, like the delicate, loving glow of rose quartz under a soft light. Featuring colors from the bright #FFC0CB to the muted #CC9AA7, this palette creates a romantic, soothing, and feminine aesthetic. Designers and developers can leverage its harmonious progression, including shades like #FCD9DE and #E6ADBD, to craft inviting digital experiences, tender branding, or elegant print materials that evoke warmth and subtle sophistication.
primary
Use #CC9AA7 as a strong, grounding color for main headings, navigation, or brand elements that need to convey stability and depth.
secondary
Apply #E6ADBD for supportive text, subheadings, or larger content blocks that provide a softer, complementary tone.
accent
Utilize #FFC0CB for gentle highlights, interactive elements, or graphical details that need a soft, delicate pop.
background
Employ #FAE6E9 as a light, airy background, providing a clean and serene canvas that enhances the palette's overall mood.
text
For body text, a medium gray or charcoal is recommended for optimal readability. For prominent headings, #CC9AA7 offers excellent contrast against lighter backgrounds.
Ideal for subtle background gradients, overlays, or creating a gentle, luminous effect in digital interfaces.
#FAE6E9 · #FCD9DE · #FFC0CBPerfect for hero sections, brand logos, or key information where a strong, sophisticated anchor is desired.
#CC9AA7 · #E6ADBD · #FAE6E9Use for buttons, secondary calls-to-action, or small design accents that need to subtly stand out with elegance.
#FFC0CB · #FCD9DE · #CC9AA7:root {
--rose-quartz-radiance-1: #FFC0CB;
--rose-quartz-radiance-2: #FCD9DE;
--rose-quartz-radiance-3: #FAE6E9;
--rose-quartz-radiance-4: #E6ADBD;
--rose-quartz-radiance-5: #CC9AA7;
}theme: {
extend: {
colors: {
"rose-quartz-radiance": {
1: "#FFC0CB",
2: "#FCD9DE",
3: "#FAE6E9",
4: "#E6ADBD",
5: "#CC9AA7",
}
}
}
}Palette colors
Accessibility
Similar palettes