Nude carries the hex code #E3BC9A, which resolves to rgb(227, 188, 154) and hsl(28, 57%, 75%). Red leads green by 39 points and green leads blue by 34, which produces the warm, orange-leaning beige that most references publish as the standard value.
Nude is also the only color in this cluster that names a range rather than a point, and treating it as a single hex is the mistake that causes the most trouble in product work. This page covers every code format, the computed palettes, the four elements where nude performs, and why a skin-tone color needs a scale instead of a swatch.
What Is the Color Nude?
Nude sits at 28° on the color wheel with 57% saturation and 75% lightness, in the orange-beige stretch between red and yellow. No CSS keyword maps to it, so the value comes entirely from convention.
The full code set for #E3BC9A:
- HEX: #E3BC9A
- RGB: rgb(227, 188, 154)
- RGBA: rgba(227, 188, 154, 1)
- HSL: hsl(28, 57%, 75%)
- HSB: 28, 32, 89
- CMYK: 0, 17, 32, 11
Sources publish two main values. Shutterstock and several color references list #E3BC9A, while HTML Color Codes publishes #F2D2BD, a noticeably lighter and pinker version, and both circulate widely enough that a token has to be pinned to a hex.
The word itself carries a history worth knowing. Nude originally named a single light skin tone as though it were universal, and the modern usage spans everything from pale cream to deep brown, which is why any serious treatment of this color starts with a range.
Why Does Nude Need a Scale Rather Than a Swatch?
A single nude value describes one skin tone and excludes every other, which makes it unusable for the interface work where the color matters most. Avatars, illustration systems, emoji, and onboarding graphics all need a scale.
Three reasons drive that requirement:
- Coverage: one value represents a narrow slice of actual human skin tones
- Consistency: an ad-hoc set drifts in undertone across a design system
- Precedent: Unicode’s emoji modifiers use a five-tone scale derived from the Fitzpatrick classification
The computed shade ramp for #E3BC9A gives a usable starting scale. Running from #F6EADF at the light end through #E3BC9A, #C7A487, #8E7660, #55463A, and down to #1C1813, the ramp covers the range while holding a single warm undertone.
Undertone is the part teams get wrong. A scale generated from one base holds its undertone consistently, and a scale assembled by picking swatches individually drifts between warm and cool in ways that read as sloppy at a glance.
Real skin tones split across warm and cool undertones, so a complete system needs two ramps rather than one. A warm ramp from #E3BC9A and a cooler ramp from a pinker base cover more ground than any single sequence can.
How Does Nude Appear on Digital Screens?
Nude renders consistently across panels because its moderate saturation keeps it well inside the sRGB gamut. It shows none of the clipping that a saturated orange or pink does on narrow-gamut displays.
The measured values set the constraints:
- #E3BC9A on white: 1.76:1, fails everything
- #E3BC9A on black: 11.93:1, passes AAA
- Black text on #E3BC9A: 11.93:1, passes AAA
- White text on #E3BC9A: 1.76:1, fails
- Dark variant #AA8D74 on white: 3.1:1, large text and non-text only
Direction of contrast governs every decision. Nude works as a background for dark text and fails as a foreground on light surfaces, which is the pattern every pale warm color in this cluster follows.
The dark variant crosses one threshold. #AA8D74 reaches 3.1:1, which covers borders, icons, and large headings while still failing body copy.
The shade at #725E4D reaches 5.5:1 and passes AA. That value is the one to reach for whenever a warm beige has to carry readable text on white.
Color temperature in the room shifts it noticeably. Under warm lighting nude drifts toward peach, and under cool office lighting it drifts toward gray, which matters more for this color than for most because the reference point is human skin.
What Are the Shades of Nude?
Shades come from mixing black into #E3BC9A while holding hue near 28°:
- #C7A487
- #AA8D74
- #8E7660
- #725E4D
- #55463A
- #392F26
- #1C1813
This ramp doubles as the skin-tone scale described above, which is the most useful property nude has. One computed sequence serves both the token system and the illustration palette.
The step at #725E4D matters for type. At 5.5:1 on white it passes AA, and everything lighter in the ramp fails as body copy on a light surface.
Tints run toward white through #E6C2A2, #E8C7AB, #EACDB4, #EDD3BC, #EFD9C5, #F1DECE, #F4E4D6, and #F6EADF. Those pale steps handle surface tints and the lightest end of the skin-tone scale.
Named neighbors sit across the beige-tan family:
- HTML nude (#F2D2BD): the alternative published value, lighter and pinker, 1.46:1 on white
- Tan (#D2B48C): the CSS keyword, yellower, 2.07:1
- Camel (#C19A6B): deeper and more golden, 2.6:1
- Wheat (#F5DEB3): paler and yellower, 1.34:1
- Peach puff (#FFDAB9): lighter and pinker, 1.31:1
What UI Elements Work Best with Nude?
Nude belongs on large surfaces, on illustration systems, and on anything that benefits from warmth without demanding attention. The 11.93:1 for black text on it opens the surface role, and the 1.76:1 against white closes the foreground one.
Text, functional borders, and any control with a white label all fall outside its range. Four element types remain where nude genuinely performs.
Backgrounds and Surface Tints
Nude works as a page or section background with white cards on top. The 1.76:1 separation reads as depth rather than as a color change, and dark text placed directly on it clears AAA.
Warmth is the differentiator against a gray neutral. A nude canvas gives an interface a human, tactile register that a cool gray can’t, which suits wellness, beauty, and lifestyle products.
Lighter tints suit large areas better. #F1DECE or #F6EADF across a full viewport carries the same warmth with less visual weight than the base value.
Avatar and Illustration Skin Tones
Illustration systems are where nude does work no other color can. The shade ramp supplies a complete skin-tone scale from one computed sequence, which keeps undertone consistent across every avatar, empty state, and onboarding graphic.
A second cooler ramp completes the coverage. Warm and cool undertones both occur in real skin, so two sequences represent people more accurately than one extended scale.
Users should be able to choose. Products that let people pick their own avatar tone from a scale avoid the problem of a default that represents only some of them.
Tags and Category Labels
Tags suit nude because they’re small, non-semantic, and benefit from a warm register. A #E3BC9A fill with #392F26 text is fully accessible at any size.
A matched family works better than a single tag. Warm neutrals at consistent lightness give a category system where no tag outranks another, which is the point of categorical color.
Nude carries no status meaning at all. That absence makes it wrong for severity states and right for anything purely descriptive.
Dark Mode Accents
Dark mode handles nude with almost no adjustment. The bright variant #D3955F on the computed surface #1D140C reaches 7.11:1 and clears AAA, so a warm accent carries small text and icons.
Saturation rises slightly as the surface darkens. A beige that reads as warm on white looks washed against near-black, and stepping toward the more golden #D3955F restores the character.
What Are the Best Nude Color Palettes for UI?
Every palette below comes from rotating hue around #E3BC9A at fixed saturation and lightness. Because saturation is moderate, these schemes produce muted values rather than the vivid sets a fully saturated base generates.
Monochromatic
The monochromatic scheme holds hue at 28° and moves lightness: #E3BC9A, #B36E31, and #F6EADF. This is the most useful of the five, since the dark step gives a genuine accent.
#B36E31 reaches 4.0:1 on white and covers large text and non-text elements. Mapping places it on interactive elements, the base on surfaces, and the tint on page backgrounds.
Analogous
Analogous pulls neighbors 30° in each direction: #E3BC9A, #E3E19A, and #E39A9C. A soft butter yellow and a dusty rose flanking the nude, all at matched lightness.
This is the most natural of the five for a brand palette. All three read as skin-adjacent warm tones, which is why beauty and wellness brands land on this combination so often.
Complementary
Nude’s complement sits opposite at 208°: #E3BC9A paired with #9AC1E3, a soft blue. Warm against cool at matched lightness and saturation, which produces separation without either value dominating.
The blue reaches 1.9:1 on white, so it belongs on surfaces rather than in text. Visily’s theme tools can generate the shade ladder for both values so the darker partners come out accessible.
Triadic
The triadic scheme gives you #E3BC9A, #9AE3BC, and #BC9AE3: nude, a soft mint, and a pale lavender. Muted and evenly spaced, which makes it a workable categorical set.
Each series should be checked against the actual surface. A palette tuned on white can lose a member against a nude canvas, since the warm neutral raises the floor slightly.
Split-Complementary
Split-complementary softens the pairing: #E3BC9A, #9AE3E1, and #9A9CE3. Nude with a pale aqua and a periwinkle, giving a third value for secondary actions.
A near-black text color anchors the whole scheme. This is the most flexible of the five for a full product interface.
Which Colors Are Similar to Nude?
Five named colors sit close enough to #E3BC9A to substitute for it, and all fail on white for the same reason the base does:
- HTML nude (#F2D2BD): the alternative published value, lighter and pinker, 1.46:1
- Tan (#D2B48C): the CSS keyword, yellower, 2.07:1
- Camel (#C19A6B): deeper and more golden, 2.6:1
- Wheat (#F5DEB3): paler and yellower, 1.34:1
- Peach puff (#FFDAB9): lighter and pinker, 1.31:1
Camel is the practical substitution when a surface needs more presence. At 2.6:1 it survives dim screens and compression better than the base while staying in the beige family.
The two published nude values differ enough to matter. #E3BC9A and #F2D2BD sit 1.2:1 apart, which is visible side by side, so a design system that mixes them will look inconsistent.
Which Colors Pair Best with Nude?
Near-black is nude’s essential partner. At 11.93:1 it’s the text color that makes every nude surface work, and warm near-blacks like #1C1813 from the shade ramp suit it better than a neutral one.
Soft blue from the complementary scheme is the natural accent. #9AC1E3 sits opposite at matched saturation, and darkening it produces an interactive color that contrasts without clashing.
Deep terracotta and rust extend the warm family. Those hues share nude’s undertone and provide the depth that a pale beige can’t reach on its own.
Sage and muted green offer the sophisticated pairing. A desaturated green against nude reads as natural and considered, which is the register most beauty and wellness brands are reaching for.
The 60-30-10 split applies as follows:
- 60% nude and its tints: page canvases and surface layers
- 30% warm near-black: text, icons, and functional borders
- 10% accent: the blue or terracotta carrying interactive meaning
Nude holds the 60% slot comfortably. Its low saturation means a large presence reads as a warm neutral rather than as a color choice.
Which Colors Should You Avoid Pairing with Nude?
White fails first. At 1.76:1 a nude element on white has no perceptible boundary, so dividers and outlines built that way disappear on most screens.
Two computed near-clashes cause the next problem: #E3DB9A and #E39D9A. Both sit 25° away at identical lightness, offering hue difference with no luminance difference.
Cool gray is the specific trap. Nude reads warm, and a cool neutral beside it drags the perceived hue toward gray-green, which is the most common complaint about beige palettes in production.
Pale pink at similar lightness loses its edge. Nude and a pastel pink both sit high on the lightness scale in adjacent hue territory, so neither reads as distinct from the other.
Does Nude Meet Accessibility Standards?
Nude fails as a foreground on white and passes as a background for dark text. The 1.76:1 measurement falls below the 4.5:1 body-text threshold and the 3:1 non-text floor set by the W3C.
Nude lands as follows across the common pairings:
- #E3BC9A on white: 1.76:1, fails AA and the 3:1 non-text floor
- White on #E3BC9A: 1.76:1, fails
- Black on #E3BC9A: 11.93:1, passes AAA
- #AA8D74 on white: 3.1:1, passes for large text and non-text
- #725E4D on white: 5.5:1, passes AA
Accessibility here extends past contrast, which is unusual for a color page. A default avatar or illustration set that represents only one skin tone excludes users in a way no ratio measures, so the scale from earlier on this page is an accessibility decision as much as a design one.
Color vision deficiency affects nude mildly. Under protanopia and deuteranopia it shifts toward a pale yellow-gray, which preserves its function as a surface and weakens it as a category marker.
Skin-tone scales need testing under simulation too. Adjacent steps in a tone ramp can converge for users with color vision deficiency, so the scale should have enough lightness separation between steps to survive it.
How Can You Convert Nude Between HEX, RGB, HSL, CMYK, and Other Color Formats?
Each format describes the same beige from a different angle:
- HEX #E3BC9A: the default in design files and CSS
- RGB rgb(227, 188, 154): three descending channels, the signature of a warm neutral
- RGBA rgba(227, 188, 154, 1): adds alpha for tinted overlays and surface washes
- HSL hsl(28, 57%, 75%): separates hue from saturation and lightness
- HSB 28, 32, 89: the picker model, reporting saturation very differently
- CMYK 0, 17, 32, 11: yellow-dominant with a small black plate
The descending channel pattern is a useful signal. When red exceeds green and green exceeds blue by roughly even steps, the color is a warm neutral, and reversing that order gives you a cool one.
HSL is what makes the skin-tone ramp reproducible. Holding hue at 28° and saturation at 57% while stepping lightness generates the whole scale, so the sequence can be regenerated from one definition rather than picked by eye.
CMYK reproduces nude well. The 0, 17, 32, 11 mix sits comfortably inside the process gamut, though paper warmth shifts the result slightly, which matters when a printed swatch has to match an on-screen skin tone.
Wrapping Up
Nude is a range, not a value, and the interfaces that use it well treat it that way. #E3BC9A works as a warm surface with near-black text at 11.93:1, #725E4D handles anything that has to be read on white, and the full shade ramp from #F6EADF down to #1C1813 gives avatars and illustrations a skin-tone scale with a consistent undertone.
Those ramps don’t need to be assembled swatch by swatch. Open Visily and use its AI-powered design tools to generate the nude tint and shade ladder, consistent illustration tone scales, and matched accent pairings across the entire design in one pass.
