Bruise

#7e4071

Muted plum-mauve bruise tone for low-contrast accents

Save
Share

About Bruise

Bruise is the one that actually feels like something happened to it. Where the purples around it are deliberate and composed, this shade has a compressed, almost muted quality, darker than , far less saturated than , and colder than in a way that reads less warm-mauve and more genuinely desaturated. It's the color of skin after impact, which sounds grim but works the opposite way in UI.

You reach for it in dark mode interfaces, product detail pages, and applications where the mood needs weight without aggression, financial dashboards, meditation apps, healthcare platforms where you need something that doesn't vibrate. It reads cleanly on nearly any background because it doesn't demand anything from its surroundings. Fashion brands use it for secondary buttons and inactive states. The saturation drop compared to its neighbors means it recedes naturally, which is exactly when you need a color that plays support rather than lead.

Pair it with warm blacks or deep charcoals; cool grays will fight it. It's moodier than it first appears, the kind of color that settles in after you've been looking at it for a while. Type sits well here without special handling.

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
7.35:1AAA

On Gray 100 #f5f5f5

Aa
6.74:1AAAAA Large

On Gray 900 #18181b

Aa
2.41:1Fail

On Black #000000

Aa
2.86:1Fail

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

Create a gradient with Bruise

Open the generator with this color pre-loaded.

Start creating