Sakura Night

#7b6c7c

Muted cool mauve-rose for modal backdrops, less lavender

Save
Share

About Sakura Night

Sakura Night is the mauve-pink you notice in a dim workspace, where pink doesn't feel loud, it feels held back. Compared to and , it keeps less of that dusty gray coolness and more of a soft rose pulse. And next to , it reads noticeably lighter and less plummy, so it doesn't drift into that rosy-cool duskiness.

On screens, I'd use Sakura Night for interface moments that need gentleness but still want clarity: hover and focus states in creator platforms, section headers in skincare or lifestyle editorial sites, and small status chips in e-commerce admin panels. It also works well on product cards where you want the highlight to feel lighter than , but not as airy as the more rose-washed pinks.

Pair it with deeper plum text, or a near-black mauve border, so the shade stays intentional and doesn't wash out against cream.

Gradient preview

See how this color looks in an animated mesh gradient.

Conversions

Click any value to copy.

Need this programmatically? Color API

Code snippets

Copy this color into your project.

Contrast checker

WCAG 2.1 contrast ratios. AA requires 4.5:1 for normal text, 3:1 for large. AAA requires 7:1 / 4.5:1.

On White #ffffff

Aa
4.91:1AAAAA Large

On Gray 100 #f5f5f5

Aa
4.50:1AAAAA Large

On Gray 900 #18181b

Aa
3.61:1FailAA Large

On Black #000000

Aa
4.28:1FailAA Large

Variations

Shades

Darker variations, created by mixing toward black.

Tints

Lighter variations, created by mixing toward white.

Tones

Muted variations, created by reducing saturation.

Hues

Hue rotations around the color wheel.

Temperatures

Warm and cool shifts of this color.

Color harmonies

Complementary
Analogous
Triadic
Split Complementary
Tetradic

Suggested palettes

Palettes built around this color.

4 colors
3 colors
4 colors
4 colors

Community palettes

Published palettes that include this color.

Similar colors

#766d7c
#806b77
#816575
#7c7173
#716675

Create a gradient with Sakura Night

Open the generator with this color pre-loaded.

Start creating