Nude is a warm, neutral shade that leans slightly orange and is positioned between red and yellow on the color wheel. It evokes feelings of simplicity and peace. Due to its association with skin tones, the color nude can encompass a broad range of natural hues like beige, tan, and brown.
Nude is defined by the following color codes and values to ensure consistency across various digital platforms and devices.
- HEX code: #F7D9BC
- RGB value: 96.9% red, 85.1% green, and 73.7% 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 ways to use nude in your designs:
- Provide a neutral backdrop. Nude offers a calming and sophisticated base to UIs, allowing other elements to pop. It’s great alone or paired with other neutral shades to create a gradient effect for visual interest.
- Deliver visual cues. Use nude for hover effects on a button or for input fields, like when users complete an action on a form.
- Add texture. Nude’s light, neutral shade makes it an ideal textural overlay on elements in a darker shade. This adds subtle depth and dimension to solid-colored elements.
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 warm and neutral spectrum as nude, consider:
- Light orange (#FFDBBB) shares an almost identical hue, evoking a sense of neutrality and calmness.
- Champagne (#F7E6CA) has more yellow undertones but shares a similar warmth and sense of comfort.
- Peach (#FFD3AC) appears slightly more orange and includes pink undertones for a soft, inviting hue.
- Seashell (#FFF1E7) appears brighter and slightly cooler due to its closeness to white on the color wheel.
To complement nude, consider pairing it with:
- Sky blue (#82C8E5) is complementary to nude, promoting a light and airy atmosphere.
- Orange (#FFA500) creates a monochromatic color combination with a vibrant and cheerful disposition.
- Sage (#B2C495) is a natural pairing that gives an outdoorsy and organic feel.
- Navy blue (#000080) grounds nude’s lightness, creating a refined contrast.
Other colors worth considering include lavender for a soft and elegant touch, charcoal gray for a sophisticated contrast, or brown for a grounded feel.
While nude is warm, it may clash with:
- Violet (#7F00FF) has a brightness that may create a disharmonious color scheme when paired with nude.
- Yellow (#FFDE21) is saturated and bright, which can look unpleasant next to nude’s muted, soft hue.
- Jet black (#252525) can disrupt nude’s lightness and make designs feel heavy.
- Yellow-green (#CCFF00) can create a jarring effect and disrupt nude’s calming nature.
Nude symbolizes peace and neutrality. It also carries connotations of elegance and sophistication, especially when paired with darker shades and other neutral colors.
In color psychology, nude evokes feelings of tranquility and calmness. Its soft nature, due to its connection to skin tones and natural materials, can also promote feelings of groundedness and authenticity.
In UI design, nude provides a neutral base that creates a warm and inviting atmosphere. It’s a great choice for adding texture and depth to UI elements or providing subtle visual cues confirming user actions.
During the 1900s, undergarments went from mostly white to a single “nude” color, a pinkish-beige shade used to match lighter complexions. Over time, fashion designers and artists began using a wider variety of nude hues to reflect the spectrum of human skin tones.
Today, nude has become more inclusive, encompassing many colors to represent the diversity of skin tones beyond pale shades.
Color variations
Shades
Tints
Tones
Hues
Color Harmonies
Complementary
Split
Monochromatic
Analogous
Triadic
Square
Custom Palettes
Earthbound
Beachfront
Boho Sunset
Contrast 1.35
- Large Text
#F7D9BC
- Normal Text
How you design, align, and build matters. Do it together with Figma.
| Category | ||
|---|---|---|
Fail | Fail | |
Fail | Fail | |
Fail | Fail |
Contrast 15.61
- Large Text
#F7D9BC
- Normal Text
How you design, align, and build matters. Do it together with Figma.
| Category | ||
|---|---|---|
Pass | Pass | |
Pass | Pass | |
Pass | Pass |
Color simulations
Protanopia
Deuteranopia
Tritanopia
Achromatopsia
The hexadecimal color #F7D9BC, known as nude, has RGB values of R:247 G:217, B:188 and CMYK values of C:0, M:0.12, Y:0.24, K:0.03.
| VALUE | CSS | |
|---|---|---|
| HEX | F7D9BC | #F7D9BC |
| RGB DECIMAL | 247, 217, 188 | RGB(247,217,188) |
| RGB PERCENTAGE | 96.9, 85.1, 73.7 | RGB(96.9%,85.1%,73.7%) |
| CMYK | 0, 12, 24, 3 | |
| HSL | 29.5°, 78.7, 85.3 | HSL(29.5°,78.7%,85.3%) |
| HSV (OR HSB) | 29.5°, 23.9, 96.9 | |
| WEB SAFE | FFCCCC | #FFCCCC |
| CIE-LAB | 88.463, 6.041, 18.109 | |
| XYZ | 72.247, 73.032, 57.865 | |
| xyY | 0.356, 0.36, 73.032 | |
| CIE-LCH | 88.463, 19.09, 71.55 | |
| CIE-LUV | 88.463, 20.25, 24.949 | |
| HUNTER-LAB | 85.459, 1.35, 19.675 | |
| BINARY | 11110111, 11011001, 10111100 | |
| iOS - SwiftUI | Color(red: 0.969, green: 0.851, blue: 0.737) | |
| iOS - UIKit | UIColor(red: 0.969, green: 0.851, blue: 0.737, alpha: 1) | |
| Android - Compose | Color(0xFFF7D9BC) |
