
Figma color wheel
Want to find the perfect complementary or analogous colors to match rosewater?
Skip to main content
Everything you need to know about mauve to inspire your next design.
Mauve is a soft and subtle color that straddles the line between pink and violet on the color wheel, leaning towards a cooler, pastel tone. In color theory, it beautifully balances the warmth of red with the tranquility of blue, creating a light, inviting hue. This shade of mauve evokes a sense of serenity and refined elegance, making it ideal for designs that aim to convey a modern yet nostalgic feel.

Shades
Tints
Tones
Hues
Complementary
Split
Monochromatic
Analogous
Triadic
Square
Grape Milkshake
Wisteria Lane
Jelly Shoes
Mauve is defined by the following color codes and values to ensure consistency across various digital platforms and devices.
- HEX code: #E0AFFF
- RGB value: 87.8% red, 68.6% green and 100% blue
Accessibility considerations play a crucial role in UX and UI design color choices. Figma offers plugins in the Community to make sure your designs meet Web Content Accessibility Guidelines.
Here are some strategic ways to incorporate mauve into your UI designs:
Keep in mind that color and its meaning can change from culture to culture—and at any given time. If you are designing for a global audience, research color considerations for your specific regions.
For variations within the same delicate and soft spectrum as mauve, consider:
To complement mauve's understated elegance, consider pairing it with:
Other colors worth considering include deep navy to provide a bold contrast, soft peach for a romantic feel, and mint green for a refreshing touch.
While mauve is versatile, it may clash with:
Mauve symbolizes uniqueness and creativity—the soft nature of mauve hints at a sense of mystery and thoughtfulness. Mauve also carries connotations of refinement and luxury.
In color psychology, mauve is recognized for its calming and nurturing qualities. Its gentle presence can promote peace and emotional balance, evoking the serene ambiance of a twilight sky.
For UI/UX design, mauve’s associations can create welcoming and secure experiences. It can be a great choice for backgrounds or accents, creating a calming and sophisticated atmosphere. Mauve can enhance readability by balancing the visual impact of bolder colors.
Mauve was the first synthetic dye discovered accidentally by the British chemist William Perkin in 1856. Perkin was attempting to create a cure for malaria but instead synthesized aniline purple, which he later called "mauveine." This discovery marked the beginning of the chemical dye industry, dramatically changing the fashion world, making vibrant colors more accessible and affordable than the expensive natural dyes previously used.
Mauve's big break came in 1862 when Queen Victoria wore a mauve silk gown to a major exhibition. Mauve became all the rage in Victorian England, a symbol of status and style for the elite. This period of intense popularity was called "mauve mania."
As other synthetic dyes were developed, the novelty of mauve faded, but it has remained a popular choice in fashion and design for its versatility and elegant appearance.
Contrast 1.79
#E0AFFF
How you design, align, and build matters. Do it together with Figma.
| Category | ||
|---|---|---|
Fail | Fail | |
Fail | Fail | |
Fail | Fail |
Contrast 11.75
#E0AFFF
How you design, align, and build matters. Do it together with Figma.
| Category | ||
|---|---|---|
Pass | Pass | |
Pass | Pass | |
Pass | Pass |
Protanopia
Deuteranopia
Tritanopia
Achromatopsia
The hexadecimal color #E0AFFF, known as mauve, has RGB values of R:224, G:175, B:255 and CMYK values of C:0.12, M:0.31, Y:0, K:0.
| VALUE | CSS | |
|---|---|---|
| HEX | E0AFFF | #E0AFFF |
| RGB DECIMAL | 224, 175, 255 | rgb(224,175,255) |
| RGB PERCENTAGE | 87.8, 68.6, 100 | rgb(87.8%,68.6%,100%) |
| CMYK | 12, 31, 0, 0 | |
| HSL | 276.8°, 100, 84.3 | hsl(276.8,100%,84.3%) |
| HSV (OR HSB) | 276.8°, 31.4, 100 | |
| WEB SAFE | CC99FF | #CC99FF |
| CIE-LAB | 78.303, 32.035, -32.843 | |
| XYZ | 64.118, 53.728, 101.595 | |
| xyY | 0.292, 0.245, 53.728 | |
| CIE-LCH | 78.303, 45.88, 314.287 | |
| CIE-LUV | 78.303, 20.833, -57.758 | |
| HUNTER-LAB | 73.3, 27.866, -30.868 | |
| BINARY | 11100000, 10101111, 11111111 | |
| iOS - SwiftUI | Color(red: 224/255, green: 175/255, blue: 255/255) | |
| iOS - UIKit | UIColor(red: 224/255.0, green: 175/255.0, blue: 255/255.0, alpha: 1.0) | |
| Android - Compose | Color(0xFFE0AFFF) |

Want to find the perfect complementary or analogous colors to match rosewater?

Learn about the color periwinkle.

Learn more about lavender.