Hex Color Code for Skin Tone: Build a Respectful Range

There is no universal hex color code for skin tone. A hex value is an sRGB color, so it can describe a swatch on a screen, but it cannot describe a person, and the same complexion looks different in daylight, under a warm lamp or through a phone camera.

That moves the job from finding the right code to building a range. This checklist-style guide covers how to sample reference photos you have permission to use, vary both lightness and undertone, create highlight and shadow steps, and test the result on real backgrounds. Treat any skin color hex code you find online as a starting swatch, never as a label for a group of people.

What is the hex color code for skin tone?

The short answer is that no single value exists. The CSS Color Module Level 4 draft dated October 8, 2026 defines hexadecimal notation as an sRGB color format. It stores red, green and blue channel values for a display. It stores nothing about a body, a light source or a camera. A page titled “human skin color hex code” can be a handy source of starting swatches, but each code is one color, not a category of people.

The problem with a single default is practical as well as social. When an avatar picker, icon set or stock illustration treats one preset as “normal”, every other tone reads as a variation of it. A range where every option has equal standing avoids that.

Checks before you pick any swatch

Call every example value illustrative. A hex code for skin color is a design decision, not a fact about anyone.
Remember that hex is sRGB. Wide-gamut screens and different browsers can render the same value differently, as the sRGB vs Display P3 comparison explains.
Expect lighting to change the look. Warm light, cool light and white balance all shift how a swatch is perceived.
Keep the source. Note which reference image or brief each swatch came from so you can revisit it later.

How do I vary undertone and not only lightness?

A common shortcut is to take one base color and make a lighter and darker version of it. The result is a row of tones that all lean the same way, which looks like a brightness slider, not a range of people. Real variety comes from changing two things at once: lightness and undertone.

Undertone is a practical color observation, not a fixed category of people. Illustrators often describe a swatch as warm (leaning yellow, orange or red), cool (leaning pink or blue), neutral, or olive (leaning green or yellow-green). These words help you compare swatches against a reference. They should never be used to sort or label an individual. The warm vs cool colors comparison explains how temperature is judged relative to neighboring colors.

Checklist for a varied range

Choose bases that differ in lightness by clearly visible steps, then check that adjacent bases also differ in hue lean.
Place swatches side by side and ask whether any two look like the same color with different brightness. If so, change the hue of one.
Include warm, cool, neutral and olive leanings at more than one lightness.
Look at the set in grayscale only as a lightness check. Equal gray values mean two swatches may be hard to separate at small sizes.
Leave room to add more later without renaming the existing ones.

How do I sample a hex color code for skin tone from a reference photo?

Observation beats guessing. Start with photos you own or have clear permission to use, and sample from them instead of copying numbers from a list. A sampled pixel describes that image under its own light, white balance and processing. It is not someone’s intrinsic skin color.

Pick a clean reference. Avoid heavy filters, strong color casts and mixed lighting.
Open the Image Color Picker. Its page documents pixel picking, adjustable sample averaging and HEX export, so averaging a small area is safer than trusting one noisy pixel.
Sample several areas. Take readings from places such as the forehead, cheek and jaw, and skip glare, deep shadow and edges where hair or clothing bleeds in.
Compare your readings. Record the middle values as your base and treat bright and dark outliers as highlight and shadow clues.
Explore with Palette From Image. It extracts dominant color clusters and currently lets you choose 3 to 12 swatches. Review the output by hand.

That last step matters. A dominant-cluster palette from a group photograph does not prove that everyone pictured is represented, because clusters follow area and frequency, not people. The same habit of avoiding edge pixels appears in sampling a brand color from a logo image. Finally, do not infer a person’s identity from a sampled value, and do not assign anyone to a category because of a number.

How do I build highlight, midtone and shadow steps?

Each chosen base needs its own set of steps. Treat the sampled average as the midtone, then create a lighter highlight and a darker shadow for shading, hover states or depth. The tool directory lists a Color Tint & Shade Scale Generator for this, and the tint vs shade comparison explains why tints add white and shades add black.

Here is a simple, reproducible example using a mix toward white and toward black by 20 percent in RGB. I calculated these by hand from the illustrative base, so another tool’s steps may differ slightly.

Step	Method	Hex
Highlight	20% toward white	#EDC6A9
Midtone (illustrative base)	Starting swatch	#E8B894
Shadow	20% toward black	#BA9376

Be cautious with these results. A pure mix with white or black tends to look chalky or muddy, and real shading often shifts hue and saturation, not only brightness. Compare each step with your reference and the lighting you intend, then adjust by eye. If a shade turns gray, editing lightness, chroma and hue separately can help, as described in hex to OKLCH and back.

Keep the same number of steps for every base so the set stays consistent.
Shift hue slightly in shadows if the reference does, instead of only darkening.
Do not present generated steps as realistic skin shading. They are an editing aid.

How do I test skin tone swatches in avatars and UI?

Swatches that look good on a blank canvas can fail in a product. Test each tone in its real context before you approve it.

Context checks

Place every tone on your actual light and dark backgrounds, not only on white.
View avatars at the smallest size they will appear and check whether the silhouette and outline still read.
Run the set through the Color Blindness Simulator, which documents image and palette previews for several color-vision simulations. Treat it as a review aid, not proof of universal accessibility.
Do a black and white check to see whether two tones collapse into the same gray.

Accessibility checks

Keep representation and accessibility separate. Passing contrast does not make a palette culturally representative, and a representative palette does not automatically pass contrast.

Under WCAG 2.2 Use of Color (1.4.1), color must not be the only way to convey information, so add labels or shapes in avatar pickers.
For text placed over a skin-colored surface, check the actual pair against the AA minimum of 4.5:1 for ordinary text or 3:1 for large text. The Contrast Checker can measure a specific pair.
For an outline, icon or other graphic needed to understand content, Non-text Contrast (1.4.11, AA) generally expects 3:1 against adjacent colors, with exceptions. Decorative illustration does not automatically need every internal shade to reach 3:1.

For a wider routine, see designing for color blindness, which covers a full accessible palette workflow.

How many skin tones are enough, and how do I document them?

I did not find an original study that establishes a required number of swatches, and I will not invent an industry standard. The honest answer is qualitative: choose a range that serves the actual characters or users, spans meaningfully different lightness and undertones, and can expand later. Where feasible, review the set with the people it depicts.

Avatar pickers and defaults

Avoid a single preset “normal” shade in illustrations or as an avatar default.
Offer clearly labeled choices and an easy way to change the selection later.
Never force someone into a supposedly exhaustive category, and never pick a tone on their behalf from a photo.

Documentation checklist

Name tokens neutrally and by order or role, not with labels that sort people. The brand color design tokens article shows how to structure CSS variables that scale.
Record each hex value, whether it is a base, highlight or shadow, and where it came from.
Note the lighting, background and display assumptions used while choosing.
Store the date and reviewers so the set can be revised.

Quick reference for building a skin tone range

Remember that a hex color code for skin tone is an illustrative sRGB swatch, not a classification.
Sample from images you own or may use, averaging several clean areas.
Avoid glare, deep shadow, heavy filters and color casts.
Vary undertone as well as lightness across bases.
Create highlight, midtone and shadow steps, then adjust them against the reference.
Test on light and dark backgrounds and at small sizes.
Check text and necessary graphics against WCAG 2.2 contrast thresholds.
Run a color-vision simulation and a grayscale check, and add labels or shapes.
Choose the number of tones from your audience, not from a fixed rule.
Document sources, roles and assumptions, and keep the range expandable.

Frequently asked questions

What is a skin color hex code?

It is a six-digit sRGB value used as a swatch for drawing or interface work. It describes a color on a screen, not a person, and it can look different under different lighting and displays.

Is there a human skin color hex code I can use as a default?

No single value should be treated as a default. A preset shade labeled normal leaves other tones as variations. Offer a range with equal standing and let users change their selection.

What hex code for skin color should I start with for an avatar?

Start from a reference you have permission to use and sample several clean areas, then treat the result as a base. An example such as #E8B894 is only an illustrative starting swatch, not a recommended or typical value.

How many skin tones should an avatar set include?

I found no verified research that sets a required number, so choose based on the people your product or story serves. Cover clearly different lightness levels and undertones and keep the set expandable.

Can I sample skin color from a photo of someone?

Use photos you own or have permission to use. A sample describes that image under its own light and processing, so do not use it to infer identity or assign a category.

Why do my skin tones look different on another screen?

Display calibration, brightness, color gamut and room lighting all change appearance, and hex is sRGB only. Check swatches on more than one device and on your real backgrounds.

Does passing contrast mean my skin tone palette is representative?

No. Contrast checks under WCAG 2.2 address legibility of text and necessary graphics, and simulators are approximate aids. Representation depends on whether the range serves the people depicted.

Next steps

No hex color code for skin tone can stand in for everyone, so the dependable route is to build a range from observation, vary lightness and undertone, and test it in context. Sample your references with the Image Color Picker, shape steps with a tint and shade scale, and review the set with the Color Blindness Simulator, while remembering that none of these outputs classifies anyone. Start with a small, documented set, leave room to grow, and revisit it as your characters and users change.

Related tools & resources on 66Colorful:

Sources and further reading

admin

Hex Color Code for Skin Tone: Building a Respectful Range of Shades

Table of Contents