Rose Quartz

A soft rose palette: blush background, deep rose primary, lavender accent. For lifestyle, beauty, and personal-brand sites.

softfemininemodernelegantfriendlysoft

Using Rose Quartz Without It Turning Sweet

Rose Quartz works for beauty, lifestyle, and personal-brand sites, but the blush background can quickly read as saccharine if every surface is pink. Keep the canvas blush, keep surfaces white, and let the deep raspberry primary do the serious work on buttons and links. The lavender accent is a secondary flourish for icons and small highlights.

The text token is a dark maroon rather than pure black, which softens the contrast just enough to feel warm while still passing AA at body sizes. When you need a quiet area in the layout, the muted rose-gray does the job better than another pink. The palette reads younger and lighter than a cream-based editorial system, so match the copy tone and photography to that personality.

Palette colors

Every color role with HEX, RGB, HSL, and OKLCH values. Click any value to copy.

Background

rgb(253, 242, 244)

hsl(349, 73%, 97%)

oklch(97.0% 0.012 4.7)

Text

rgb(61, 36, 38)

hsl(355, 26%, 19%)

oklch(29.3% 0.038 14.5)

Primary

rgb(190, 24, 93)

hsl(335, 78%, 42%)

oklch(52.5% 0.199 4.0)

Secondary

rgb(245, 160, 176)

hsl(349, 81%, 79%)

oklch(79.4% 0.103 7.4)

Accent

rgb(124, 58, 237)

hsl(262, 83%, 58%)

oklch(54.1% 0.247 293.0)

Surface

rgb(255, 255, 255)

hsl(0, 0%, 100%)

oklch(100.0% 0.000 89.9)

Border

rgb(243, 212, 218)

hsl(348, 56%, 89%)

oklch(89.7% 0.035 4.7)

Muted

rgb(155, 113, 119)

hsl(351, 17%, 53%)

oklch(59.3% 0.054 9.3)

WCAG contrast checks

Three semantic pairs evaluated against WCAG 2.2 AA (4.5:1 for normal text).

Text on background

Ratio 12.97:1

AA pass

Primary on background

Ratio 5.52:1

AA pass

Accent on background

Ratio 5.21:1

AA pass

Export tokens

Six formats covering most design system workflows. Each copies cleanly to your clipboard.

tokens.css

:root {
  --color-background: #FDF2F4;
  --color-foreground: #3D2426;
  --color-primary: #BE185D;
  --color-secondary: #F5A0B0;
  --color-accent: #7C3AED;
  --color-surface: #FFFFFF;
  --color-border: #F3D4DA;
  --color-muted: #9B7177;
}

Related Palettes

Grapefruit

A soft pink palette: grapefruit background, burgundy text, coral accent. For food, lifestyle, and personal-brand sites that want warmth without sweetness.

Editorial Cream

A warm editorial palette inspired by print magazines: cream paper, ink-black text, a brick-red primary, and a muted gold secondary.

Midnight Brand

A deep midnight palette for premium SaaS: a near-black canvas, soft periwinkle primary, and amber accent for high-contrast CTAs.

Sage Studio

A calm organic palette: sage greens over warm off-white, with a terracotta accent for warmth. Ideal for wellness and lifestyle brands.