Find skin tone color palettes with warm, natural ranges for portraits, beauty products, inclusive illustrations, editorial layouts, and human-centered brand work.
The skin tone palettes here are mostly peach, tan, rose and brown ramps, plus some decorative pinks. For illustration and character design they are a starting point; a representative cast usually needs deeper tones added, because the collection skews light.
The 213 palettes here mix two things: complexion-like ramps of peach, tan and brown, and decorative pinks and roses (#FFB9B9, #FF8DC7) that are skin colors only in the makeup sense. For illustration and character work, the complexion ramps are the useful part.
Those ramps skew light. Of the roughly 590 warm swatches in the collection, only about one in ten is darker than 40% lightness. If you are designing a cast of characters or a set of avatars, expect to add deeper tones on purpose rather than relying on what is most common here. A few palettes already provide them: #2D2424, #5C3D2E, #B85C38, #E0C097; #402218, #865439, #C68B59, #D7B19D; and #3D322C, #654534, #9C563D, #D9B26E.
Give every complexion the same structure, typically a base, a shadow, a deeper shadow and a highlight, so that characters with deep and light skin get the same amount of modeling. A common failure is a five-step ramp for light skin and a two-step ramp for dark skin, which makes deeper-skinned characters look flatter.
Shift hue as you go darker instead of mixing in gray or black. Shadows usually move slightly toward red or violet and keep most of their saturation; highlights move lighter and a little warmer, or toward the color of the light source. Gray-mixed shadows are the usual reason skin looks ashen.
A near-black outline that looks crisp on light skin can vanish on deep skin. #2D2424 measures 8.75:1 against #E0C097 but only 1.56:1 against #5C3D2E. Instead of one outline color for everyone, color the lines per ramp (a darker, more saturated version of that ramp's shadow), add a rim light, or set the figure against a lighter background so the silhouette still reads.
The same applies to interface defaults. If a product shows avatars or hand icons, let people choose a tone, the way Unicode emoji offer five skin tone modifiers based on the Fitzpatrick scale, rather than shipping one human tone as the default.
Put every character on the same kind of background and make sure each skin ramp separates from it; a muted mid blue or a light neutral usually works across tones. Avoid placing deep-skinned figures only on dark backgrounds and light-skinned figures only on light ones.
Midtone browns are hard for dark text: #1A1A1A on #865439 is 2.77:1, while white on it is 6.29:1. For labels over illustrations, put the text on a solid chip rather than directly on skin, and never use skin color alone to signal identity, status or selection.
Updated