Puce is a deep, rich color that conveys a sense of antique elegance and depth. Positioned between brown and dark red (and closer to red) on the color wheel, it has a warm undertone. Its hues range from dark maroon to a muted burgundy.

Puce is defined by the following color codes and values to ensure consistency across various digital platforms and devices.
- HEX code: #E491A6
- RGB value: 89.4% red, 56.9% green and 65.1% 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.
While puce can be an interesting color choice, it has limitations in UI design due to its relative obscurity and potential for misinterpretation. Here are some things to consider:
- Use sparingly as an accent. A small amount of puce can add a unique touch to a design, but avoid using it as a dominant color. Consider using it for buttons, accents, or subtle highlights to draw attention without overwhelming the user.
- Pair with clear and readable colors. Because puce can be on the darker side, ensure it's paired with clear and contrasting colors for optimal readability. White, black, or lighter grays are safe for backgrounds or primary text.
- Consider your audience. Puce might not be suitable for all audiences or brand personalities. It might work for a sophisticated brand aiming for unconventional elegance. It would not be ideal for a playful or youthful brand.
- Test thoroughly. Due to puce's potential for negative connotations, thoroughly test your UI design with users. Get feedback on how they perceive the color and whether it evokes the desired emotions.
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.
Puce sits in a unique position, blending pink's softness with a touch of earthy brown. Variations within this distinctive spectrum include:
- Dusty Rose (#DCA1A1) offers a lighter, more subdued pink, echoing puce's softness with a touch of warmth.
- Mauve (#E0AFFF) presents a more purple-infused counterpart, sharing puce's understated elegance.
- Rosewood (#65000B) dives into a darker, richer territory, retaining the sophistication of puce with added depth.
- Terra cotta (#E2725B) brings in an earthy, reddish tone, similar to puce but with a sunnier disposition.
To complement puce's muted elegance, consider pairing it with:
- Sage green (#9EAB8A) for a natural and understated elegance, creating a serene and balanced palette.
- Navy blue (#000080) adds a classic depth, contrasting beautifully with puce's soft warmth.
- Champagne (#F7E6CA) offers a light, neutral backdrop that allows puce to stand out subtly.
- Slate gray (#6D8196) provides a modern and sophisticated contrast, highlighting puce's unique hue.
- Cream (#FDFBD4) for a soft and harmonious combination, perfect for a gentle and inviting space.
Other colors worth considering include deep teal for a rich contrast, silver for a sleek modern look, and lavender for a playful yet refined palette.
While puce is versatile, it may not harmonize well with:
- Bright yellow (#FFFF00) can overpower puce's subtlety, creating a visually jarring combination.
- Lime green (#89F336) might be too vibrant, overshadowing the understated elegance of puce.
- Neon orange (#FF6A00) offers a clash of warmth, potentially unsettling the balance of puce's muted tones.
- Electric blue (#00F0FF) could disrupt the harmony with its intense vibrancy.
- Hot pink (#FF69B4) shares a pinkish realm with puce but can dominate with its brightness, losing the nuanced elegance of puce.
The color puce carries a unique blend of symbolism due to its composition and historical use. Its brown component evokes stability, grounding, and a connection to nature. Its purple adds sophistication and a hint of mystery, potentially sparking intrigue.
However, the combination of brown and purple in puce can also suggest melancholy or lethargy. It's crucial in color psychology to balance these aspects, as puce can convey both calm and understated elegance or carry negative connotations.
In UI design, the nuanced mix of brown and purple makes puce both challenging and rewarding. Designers can harness its unique qualities to create intriguing and refined interfaces, but must carefully manage its use to avoid evoking negative feelings.
The origin of puce is unclear, but it likely first appeared in the 18th century. The French word "puce," meaning flea, describes the color of flea droppings or bloodstained bedding from flea bites. Initially, puce dye may have been made by crushing fleas and mixing the pigment with other colors to achieve a brownish-red shade. This method was later replaced by more modern pigment-making techniques.
Despite its strange and unpleasant beginnings, puce became popular in 18th-century France, especially during Louis XVI’s reign. Although there is no evidence that Marie Antoinette wore puce, it was favored by some aristocrats.
Color variations
Shades
Tints
Tones
Hues
Color Harmonies
Complementary
Split
Monochromatic
Analogous
Triadic
Square
Custom Palettes
Victorian Rose
Cactus Flower
Aphrodite
- Large Text
Figma
- Normal Text
How you design, align, and build matters. Do it together with Figma.
2.36:1
WCAG 2.2 Simple Contrast
Normal Text
- Fail
- AA
- 4.5:1
- Fail
- AAA
- 7:1
Large Text
- Fail
- AA
- 3:1
- Fail
- AAA
- 4.5:1
- Large Text
Figma
- Normal Text
How you design, align, and build matters. Do it together with Figma.
8.9:1
WCAG 2.2 Simple Contrast
Normal Text
- Pass
- AA
- 4.5:1
- Pass
- AAA
- 7:1
Large Text
- Pass
- AA
- 3:1
- Pass
- AAA
- 4.5:1
Color simulations
Protanopia
Deuteranopia
Tritanopia
Achromatopsia
The hexadecimal color #E491A6, known as puce, has RGB values of R:228, G:145, B:166 and CMYK values of C:0, M:0.36, Y:0.27, K:0.11.
VALUE | CSS | |
---|---|---|
HEX | E491A6 | #E491A6 |
RGB DECIMAL | 228, 145, 166 | rgb(228,145,166) |
RGB PERCENTAGE | 89.4, 56.9, 65.1 | rgb(89.4%,56.9%,65.1%) |
CMYK | 0, 36, 27, 11 | |
HSL | 344.8°, 60.6, 73.1 | hsl(344.8,60.6%,73.1%) |
HSV (OR HSB) | 344.8°, 36.4, 89.4 | |
WEB SAFE | CC9999 | #CC9999 |
CIE-LAB | 69.112, 34.063, 2.184 | |
XYZ | 49.003, 39.501, 41.118 | |
xyY | 0.378, 0.305, 39.501 | |
CIE-LCH | 69.112, 34.133, 3.668 | |
CIE-LUV | 69.112, 52.498, -3.182 | |
HUNTER-LAB | 62.849, 29.188, 5.206 | |
BINARY | 11100100, 10010001, 10100110 | |
iOS - SwiftUI | Color(red: 228/255, green: 145/255, blue: 166/255) | |
iOS - UIKit | UIColor(red: 228/255.0, green: 145/255.0, blue: 166/255.0, alpha: 1.0) | |
Android - Compose | Color(0xFFE491A6) |