Some links on this page are affiliate links: if you buy through them we may earn a commission, at no extra cost to you.
There is no single hex code for human skin. For a useful digital reference, the ten swatches associated with the Monk Skin Tone (MST) Scale range from #F7EDE4 to #2A2420. They can help with illustration, avatars, and design, but they are reference colors—not definitive measurements or labels for people.
Skin tone hex codes at a glance
The values below are published MST swatches. The numbers indicate positions on a visual reference scale, from its lightest swatch to its darkest; they do not rank people or assign anyone an identity.
| Reference | Swatch | Hex |
|---|---|---|
| MST 1 — lightest reference | #F7EDE4 |
|
| MST 2 | #F3E7DA |
|
| MST 3 | #F6EAD0 |
|
| MST 4 | #EAD9BB |
|
| MST 5 | #D7BD96 |
|
| MST 6 | #9F7D54 |
|
| MST 7 | #815D44 |
|
| MST 8 | #604234 |
|
| MST 9 | #3A312A |
|
| MST 10 — darkest reference | #2A2420 |
The FDA lists these values as a ten-value subjective reference scale. The palette is handy when you need a starting point, but it does not cover every person, undertone, body area, or lighting condition.
The Tool Desk
Outbyte PC Repair FREERepair Windows errors before they cause bigger problemsFix Now →Outbyte Driver Updater FREEFix the driver behind crashes, sound loss and screen glitchesFind Drivers →Copyable CSS palette
Use custom properties to make the swatches easy to reuse in a stylesheet:
#1 Best Overall
:root {
--skin-tone-1: #F7EDE4;
--skin-tone-2: #F3E7DA;
--skin-tone-3: #F6EAD0;
--skin-tone-4: #EAD9BB;
--skin-tone-5: #D7BD96;
--skin-tone-6: #9F7D54;
--skin-tone-7: #815D44;
--skin-tone-8: #604234;
--skin-tone-9: #3A312A;
--skin-tone-10: #2A2420;
}
.avatar {
background-color: var(--skin-tone-6);
}These variables are design references. Do not use them to infer a user’s race, ethnicity, medical status, or identity.
What a skin-tone hex code represents
A hex color is a compact way to write RGB channel values. In #RRGGBB, each pair represents red, green, and blue, with each channel ranging from 0 to 255. An eight-digit value such as #9F7D5480 adds an alpha channel: 80 sets partial opacity, while 00 is fully transparent and FF fully opaque. Figma explains hex, RGB, and color entry.
The code does not guarantee the same appearance everywhere. A display, color profile, browser, image processing, and surrounding colors can all affect how a swatch looks. For ordinary web and CSS work, sRGB is a sensible default unless a project calls for a wider-gamut workflow. In Figma, assigning or converting a profile can affect appearance and, in the case of conversion, color values; see its guide to managing color profiles.
Rank #2
MST is a reference palette; Fitzpatrick is not a hex chart
The two scales answer different questions. The Fitzpatrick Skin Type Scale has six types and was developed chiefly to describe skin response to ultraviolet exposure, including burning and tanning. It is not a standardized digital color system. Turning Types I–VI into six supposedly exact hex colors gives a false impression of precision.
| Feature | Fitzpatrick | Monk Skin Tone |
|---|---|---|
| Original purpose | Describe UV sensitivity and response such as burning and tanning | Provide a visual skin-tone reference |
| Categories | Six types | Ten swatches |
| Standard hex palette | Not inherently a hex palette | Published swatch values are available |
| Key limitation | Often misused as a precise color classification; has representation and consistency concerns | Still compresses complex, continuous appearance into ten references |
Neither scale is a calibrated measurement of an individual. The FDA materials discuss concerns about the Fitzpatrick scale’s use as a color category, while a 2024 study reports that visual ratings using both Fitzpatrick and Monk can diverge from calibrated colorimeter measurements. For medical, scientific, or computer-vision work, follow a validated measurement protocol rather than substituting a palette.
How to choose a realistic skin color
For a quick illustration, choose a reference near the intended lightness, then tune it to the subject and scene. Build a small family of related colors rather than relying on a single flat fill:
Rank #3
- 12 SEASON PERSONAL COLOR ANALYSIS SYSTEM FOR WOMEN: Identify your most flattering color palette based on undertone, depth, and contrast - covers all 12 sub-seasons including Warm Spring, Cool Summer, Soft Autumn, Dark Winter, and every type in between for a truly personalized result
- PROFESSIONAL COLOR MATCHING TOOL FOR MAKEUP AND FASHION: Takes the guesswork out of choosing makeup, clothing, and accessories - hold the fan against your skin to instantly see which colors make you glow and which ones wash you out, no consultation needed
- PORTABLE COMPACT FAN DESIGN: Lightweight and easy to carry, this fan format lets you take your personal color palette shopping, to styling appointments, or anywhere on the go - your most flattering color guide always at your fingertips
- IDEAL FOR PERSONAL USE AND PROFESSIONALS: Perfect for color analysis beginners discovering their season for the first time, or for image consultants, personal stylists, and color practitioners who need a reliable, professional-grade client tool
- PERFECT GIFT FOR COLOR ANALYSIS ENTHUSIASTS: A thoughtful, practical gift for anyone passionate about seasonal color analysis, personal styling, or curated beauty routines - the ideal starting point for building a wardrobe and makeup collection that truly fits
- Base: the main midtone for the area you are depicting.
- Shadow: a darker color shaped by the scene’s light and reflected surroundings. It is not automatically the person’s underlying skin color.
- Highlight: a lighter or more light-colored accent; a bright highlight is not a useful base-color sample.
- Warmth or blush: localized color where the reference calls for it, rather than a universal tint.
- Reflected light: a subtle influence from nearby clothing, walls, or scenery.
Adjust value (lightness), saturation, and hue independently. Warm light may call for more yellow, red, or peach; cool light can shift a color toward blue or gray. Skin should not automatically be pushed toward orange or peach. Two colors with similar lightness can have different undertones.
Free tools Windows power users keep installed
One-click scans. No signup required.
Artists and beauty products often describe undertones as warm (yellow, golden, peach, or reddish), cool (pink, red, bluish, or mauve), or neutral (more balanced). These are practical, approximate descriptions—not fixed scientific categories. Lighting, nearby colors, and the observer’s perception can change how an undertone appears, and not everyone fits neatly into one label.
Also account for local variation. A person’s face, hands, arms, and torso may differ in color. Makeup, tanning, sunscreen, freckles, scars, tattoos, redness, and hyperpigmentation can affect a particular area without defining a person’s overall tone.
Rank #4
How to sample a skin color from a photo
- Work from the highest-quality image available, and avoid a heavily filtered, compressed, or strongly color-graded version when matching a reference.
- Look for a representative area in even light, away from glare, deep shadow, obvious blush, lips, makeup, freckles, or redness. Choose the relevant body area for the depiction rather than assuming a cheek or hand represents the whole person.
- Sample a small region or average several pixels instead of trusting one pixel. One pixel may capture a highlight, shadow, reflected color, compression artifact, or camera color bias.
- Compare the sampled color with the surrounding image and adjust it for your intended output. A sampled color represents that image under its capture and display conditions—not a person’s one true skin color.
- Keep shadow, highlight, and reflected-light colors separate from the base tone. If the artwork will be printed, proof it in the intended print workflow; screen-oriented RGB values do not promise identical ink reproduction.
In Photoshop, Adobe documents Select > Color Range, where you can choose Skin Tones for an approximate selection or Sampled Colors with the Eyedropper, then refine with controls such as Fuzziness and Localized Color Clusters. Adobe’s Color Range guide explains the workflow. The Skin Tones option selects colors resembling common skin tones; it does not identify a person’s actual skin color, race, or ethnicity.
Independent reader supportYour contribution helps us test, update, and keep practical guides available for everyone.Entering the values in design tools
Figma
Select a layer, click the swatch in the Fill or Stroke section of the right sidebar, then use the dropdown below the hue and opacity controls to choose a color model and enter the value. Figma’s color-model guide documents hex entry and opacity; you can use a six-digit hex with separate opacity or an eight-digit #RRGGBBAA.
Recommended Free Tools
Photoshop
For picking a color from an image, use the Eyedropper or Photoshop’s Color Range workflow above, then enter or adjust the resulting color in the color controls. Color Range is a selection aid, not a skin measurement.
Best Value
- Adult Unisex Eye Shadow Palette: Contains 10 Flesh Tone Shades For All Skin Types
- Skin Illustrator Brand: Long Lasting Color That Creates A Natural Look
- 10 Piece Eye Shadow Set: Includes Shades From Light To Dark For Versatile Use
- Easy To Apply: Smooth Gliding Formula Creates Flawless Blending
- Versatile Eyeliner: Can Be Used As An Eyeliner, Eyeshadow, And Highlighter
Procreate
Procreate’s handbook explains how to enter a hexadecimal value to reproduce a shade in its color controls: Procreate color values.
Use skin-tone colors accessibly in interfaces
A swatch is not accessible or inaccessible on its own; accessibility depends on its pairing, role, and context. When skin-tone colors appear in avatars, selectors, illustrations, or controls:
- Do not use color as the sole indication of selection, status, meaning, or error. Add a label, icon, outline, pattern, or other cue.
- Check text and important graphics against their backgrounds. Common WCAG contrast targets are 4.5:1 for normal text at AA, 3:1 for large text and graphics at AA, and 7:1 for normal text at AAA; use a contrast checker for the actual foreground-background pair.
- Test the full interface for low vision and color-vision deficiencies, not just a palette preview. Adobe Color describes tools for simulating color-vision deficiencies and checking palette conflicts.
- Provide accessible names for selectable swatches so assistive-technology users can distinguish options without relying on appearance alone.
Figma provides a contrast checker and describes a built-in color picker. Adobe outlines its color accessibility tools. A contrast ratio applies to a specific color pairing, not to an isolated skin-tone swatch.
What’s actually slowing this PC down?
Pick the symptom - the matching free tool is one click away.
Why no palette can represent every person
Human skin color varies continuously, and appearance changes with undertone, blood flow, tanning, body area, local features, and illumination. Warm household bulbs may make skin look more yellow or orange; cool daylight may make it appear bluer or grayer. Shadows, reflected light, white balance, HDR, filters, and phone processing all change what a photograph records. A display profile can shift how that recorded color appears again.
A ten-swatch palette is useful precisely because it offers a shared starting point—not because ten colors exhaust human variation. Use it as a practical visual reference for digital work, and use calibrated tools and validated methods when the task requires measurement.
Quick Recap
Product prices and availability are accurate as of the date/time indicated and are subject to change. Any price and availability information displayed on Amazon at the time of purchase will apply.
