Skin Tone Color Palettes for Design: HEX Codes, Undertones and Inclusive Ranges

A single beige default still shows up in stickers, empty states and prototype avatars. When every face defaults to a middle tone, products quietly signal who is centred. Shipping a stepped range from very light to very dark, with room for undertone, is the simplest way to make illustration and UI feel intentional rather than accidental.

Inclusive ranges also reduce rework. Art directors, game teams and design systems that lock a seven or ten step ramp early spend less time matching one-off HEX codes across files. The goal is not to claim you have captured every person; it is to give creators enough value and undertone coverage that they are not forced into one or two defaults.

Search demand mirrors that need. Designers look for skin tone hex codes, skin tone palettes for illustration, avatar skin tone ranges and inclusive skin tone palettes because they want a concrete starting set they can copy, critique and extend rather than invent from scratch under deadline pressure.

Value (how light or dark) and undertone (the hue bias under the surface) are separate decisions. Two people can share a similar lightness and still need different HEX neighbours because one reads golden and another reads pink or olive. In digital work, undertone is usually a small hue and saturation shift, not a completely different colour family.

Warm undertones favour peach, gold and amber-brown. Cool undertones favour rose, muted mauve-brown and slightly bluish shadows. Neutral sits between those poles with restrained chroma. Olive adds a greenish-gold cast that is easy to miss if your only tools are “pink” and “peach” pickers.

The swatch groups below are suggested values derived from the base palette, not laboratory measurements. Use them to train your eye, then refine against reference photos for your specific characters or brand photography.

If a generated palette looks flat, check whether every step shares the same undertone bias. Mixing one cool rose midtone into an otherwise warm ramp is a common cause of “something feels off” notes in critique, even when lightness spacing looks even on a strip.

In painting and vector illustration, the most common skin mistake is shading by mixing the base fill with black or white alone. Black desaturates toward grey; white washes toward chalk. Prefer neighbouring tones from your ramp: a shadow may move one or two steps darker and slightly cooler or warmer, depending on the light source.

Highlights often shift hue as well as lightness. Warm key light can push a highlight toward peach or gold; cool ambient fill can push a reflected edge toward a muted rose or olive neighbour. Keep specular spots small and lower in saturation than beginners expect so skin does not look plastic.

Build a local palette per character: base, one or two shadow steps, one highlight step, plus a separate colour for lips, flush or undertone accents. Linking those swatches to the shared seven-step system keeps a cast coherent when characters appear together.

Product avatars and emoji-like stickers need enough steps that light and dark skin are first-class choices, not afterthoughts. Eight to twelve tones is a common inclusive target for avatar builders. Avoid shipping only a middle-beige default with a vague “darker” option; users notice when the dark end of the ramp is compressed into one or two muddy browns.

Unicode emoji modifiers follow five Fitzpatrick-inspired levels on top of the classic yellow emoji. That five-step ladder is a useful compatibility reference for emoji-adjacent assets, but product avatars usually benefit from more values and explicit undertone variants so faces do not all share the same hue bias.

When you generate avatar art, test the full set in a grid at small sizes. Chroma that looks rich at 512px can disappear or turn orange at 24px. Adjust midtones so each step remains distinguishable in both light and dark UI themes.

Skin colours in interfaces often appear as avatar fills, illustration backgrounds or marketing crops. Body text placed on those fills must still meet contrast requirements. WCAG 2.1 Level AA requires a contrast ratio of at least 4.5:1 for normal body text and 3:1 for large text.

Do not assume a deep brown swatch can carry white labels at every size, or that charcoal text will clear 4.5:1 on #FBE8D3 under every display. Check the actual pairs in a contrast checker and keep semantic text colours independent from decorative skin tokens.

For status dots, notification badges and icon glyphs sitting on avatar images, aim for the non-text contrast minimum of 3:1 against adjacent colours. If an avatar photo is unpredictable, add a solid ring or scrim so controls stay legible.

Brand systems that include illustrated people should document skin ramps the same way they document greys and brand accents. Publish HEX or design-token names, undertone guidance, and forbidden shortcuts such as overlaying a single orange multiply layer on every figure.

In photo retouching, global warm filters can erase undertone diversity and push every subject toward the same tan. Prefer selective adjustments, protect highlight roll-off, and compare retouched skin against a reference ramp so corrections stay believable across a campaign cast.

When packaging or beauty branding needs precise reproduction, designers often consult physical references such as the Pantone SkinTone Guide alongside on-screen palettes. Digital HEX lists remain a production convenience, not a replacement for colour-managed print workflows.

The Fitzpatrick scale classifies skin into six types based largely on sun response and burning versus tanning behaviour. It is widely referenced in dermatology and was later adapted as a shorthand for emoji modifiers. It is not a design HEX palette, and it was not built as a full representation system for product illustration.

The Monk Skin Tone Scale offers ten tones spanning a broader inclusive range and has been used in Google research and products concerned with computer vision fairness. Teams building avatar pickers sometimes align internal ramps to ten steps so evaluation sets stay comparable, even when their final art uses different HEX values.

The Pantone SkinTone Guide is a physical and digital reference covering over 100 skin tones (the 2023 guide lists 138). It is useful when you need consistent specification across cosmetics, packaging and print. Cite it as a professional matching tool rather than as free web palette data.

None of these systems replace looking at real people under real light. Use them to structure range and vocabulary, then validate your HEX choices against photography and stakeholder review.

Start from the seven-step base above, then open the AI color palette generator and describe the cast you need in plain language. Prompts that mention undertone and use case work better than a single word like “skin”: for example, “inclusive warm olive skin tone ramp for avatars” or “cool undertone portrait illustration palette”.

Lock any swatches you want to keep, regenerate the rest, and copy HEX codes into your design tokens. If you already have reference photos, use the color palette from image tool to extract candidates, then prune muddy midtones and enforce a clear light-to-dark spread.

Browse the Skin Tone palette collection for additional curated sets, and run critical text pairs through the contrast checker before you ship. When you need finer control between two anchors, the color mixer helps you build even steps without guessing.