{"id":629,"date":"2026-11-04T13:00:03","date_gmt":"2026-11-04T13:00:03","guid":{"rendered":"https:\/\/66colorful.com\/blog\/?p=629"},"modified":"2026-11-04T13:00:03","modified_gmt":"2026-11-04T13:00:03","slug":"hex-color-code-for-skin-tone","status":"publish","type":"post","link":"https:\/\/66colorful.com\/blog\/hex-color-code-for-skin-tone\/","title":{"rendered":"Hex Color Code for Skin Tone: Building a Respectful Range of Shades"},"content":{"rendered":"\n<p class=\"wp-block-paragraph\">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.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">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.<\/p>\n\n\n\n<div class=\"wp-block-rank-math-toc-block\" id=\"rank-math-toc\"><h2>Table of Contents<\/h2><nav><ul><li class=\"\"><a href=\"#what-is-the-hex-color-code-for-skin-tone-1\">What is the hex color code for skin tone?<\/a><\/li><li class=\"\"><a href=\"#how-do-i-vary-undertone-and-not-only-lightness-2\">How do I vary undertone and not only lightness?<\/a><\/li><li class=\"\"><a href=\"#how-do-i-sample-a-hex-color-code-for-skin-tone-from-a-reference-photo-3\">How do I sample a hex color code for skin tone from a reference photo?<\/a><\/li><li class=\"\"><a href=\"#how-do-i-build-highlight-midtone-and-shadow-steps-4\">How do I build highlight, midtone and shadow steps?<\/a><\/li><li class=\"\"><a href=\"#how-do-i-test-skin-tone-swatches-in-avatars-and-ui-5\">How do I test skin tone swatches in avatars and UI?<\/a><\/li><li class=\"\"><a href=\"#how-many-skin-tones-are-enough-and-how-do-i-document-them-6\">How many skin tones are enough, and how do I document them?<\/a><\/li><li class=\"\"><a href=\"#quick-reference-for-building-a-skin-tone-range-7\">Quick reference for building a skin tone range<\/a><\/li><li class=\"\"><a href=\"#frequently-asked-questions\">Frequently asked questions<\/a><\/li><li class=\"\"><a href=\"#next-steps\">Next steps<\/a><\/li><li class=\"\"><a href=\"#sources\">Sources and further reading<\/a><\/li><\/ul><\/nav><\/div>\n\n\n<div class=\"wp-block-image post_content_image\">\n<figure class=\"aligncenter size-large\"><img loading=\"lazy\" decoding=\"async\" width=\"1024\" height=\"576\" src=\"https:\/\/66colorful.com\/blog\/wp-content\/uploads\/2026\/10\/hex-color-code-for-skin-tone-image-1-551-1-04484eca23d6c8ce-1024x576.jpg\" alt=\"Designer&apos;s desk with a drawing tablet and a sheet of varied warm and cool swatch shapes\" class=\"wp-image-632\" srcset=\"https:\/\/66colorful.com\/blog\/wp-content\/uploads\/2026\/10\/hex-color-code-for-skin-tone-image-1-551-1-04484eca23d6c8ce-1024x576.jpg 1024w, https:\/\/66colorful.com\/blog\/wp-content\/uploads\/2026\/10\/hex-color-code-for-skin-tone-image-1-551-1-04484eca23d6c8ce-300x169.jpg 300w, https:\/\/66colorful.com\/blog\/wp-content\/uploads\/2026\/10\/hex-color-code-for-skin-tone-image-1-551-1-04484eca23d6c8ce-768x432.jpg 768w, https:\/\/66colorful.com\/blog\/wp-content\/uploads\/2026\/10\/hex-color-code-for-skin-tone-image-1-551-1-04484eca23d6c8ce-800x450.jpg 800w, https:\/\/66colorful.com\/blog\/wp-content\/uploads\/2026\/10\/hex-color-code-for-skin-tone-image-1-551-1-04484eca23d6c8ce.jpg 1200w\" sizes=\"auto, (max-width: 1024px) 100vw, 1024px\" \/><\/figure>\n<\/div>\n\n\n<h2 class=\"wp-block-heading\" id=\"what-is-the-hex-color-code-for-skin-tone-1\">What is the hex color code for skin tone?<\/h2>\n\n\n\n<p class=\"wp-block-paragraph\">The short answer is that no single value exists. The <a href=\"https:\/\/www.w3.org\/TR\/2026\/CRD-css-color-4-20261008\/\" title=\"CSS Color Module Level 4\" target=\"_blank\" rel=\"noopener\">CSS Color Module Level 4<\/a> 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 &#8220;human skin color hex code&#8221; can be a handy source of starting swatches, but each code is one color, not a category of people.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">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 &#8220;normal&#8221;, every other tone reads as a variation of it. A range where every option has equal standing avoids that.<\/p>\n\n\n\n<h3 class=\"wp-block-heading\" id=\"section-0-detail-1\">Checks before you pick any swatch<\/h3>\n\n\n\n<ul class=\"wp-block-list\">\n<li>Call every example value illustrative. A hex code for skin color is a design decision, not a fact about anyone.<\/li>\n\n\n\n<li>Remember that hex is sRGB. Wide-gamut screens and different browsers can render the same value differently, as the <a href=\"https:\/\/66colorful.com\/compare\/srgb-vs-display-p3\" title=\"Srgb Vs Display P3\">sRGB vs Display P3 comparison<\/a> explains.<\/li>\n\n\n\n<li>Expect lighting to change the look. Warm light, cool light and white balance all shift how a swatch is perceived.<\/li>\n\n\n\n<li>Keep the source. Note which reference image or brief each swatch came from so you can revisit it later.<\/li>\n\n\n<\/ul>\n\n\n<div class=\"wp-block-image post_content_image\">\n<figure class=\"aligncenter size-large\"><img loading=\"lazy\" decoding=\"async\" width=\"1024\" height=\"1024\" src=\"https:\/\/66colorful.com\/blog\/wp-content\/uploads\/2026\/10\/hex-color-code-for-skin-tone-image-2-551-2-579d9f19d852bb5e-1024x1024.jpg\" alt=\"Fanned painted swatch cards in varied warm, cool and olive-leaning tones\" class=\"wp-image-634\" srcset=\"https:\/\/66colorful.com\/blog\/wp-content\/uploads\/2026\/10\/hex-color-code-for-skin-tone-image-2-551-2-579d9f19d852bb5e-1024x1024.jpg 1024w, https:\/\/66colorful.com\/blog\/wp-content\/uploads\/2026\/10\/hex-color-code-for-skin-tone-image-2-551-2-579d9f19d852bb5e-300x300.jpg 300w, https:\/\/66colorful.com\/blog\/wp-content\/uploads\/2026\/10\/hex-color-code-for-skin-tone-image-2-551-2-579d9f19d852bb5e-150x150.jpg 150w, https:\/\/66colorful.com\/blog\/wp-content\/uploads\/2026\/10\/hex-color-code-for-skin-tone-image-2-551-2-579d9f19d852bb5e-768x768.jpg 768w, https:\/\/66colorful.com\/blog\/wp-content\/uploads\/2026\/10\/hex-color-code-for-skin-tone-image-2-551-2-579d9f19d852bb5e.jpg 1080w\" sizes=\"auto, (max-width: 1024px) 100vw, 1024px\" \/><\/figure>\n<\/div>\n\n\n<h2 class=\"wp-block-heading\" id=\"how-do-i-vary-undertone-and-not-only-lightness-2\">How do I vary undertone and not only lightness?<\/h2>\n\n\n\n<p class=\"wp-block-paragraph\">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.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">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 <a href=\"https:\/\/66colorful.com\/compare\/warm-vs-cool-colors\" title=\"Warm Vs Cool Colors\">warm vs cool colors comparison<\/a> explains how temperature is judged relative to neighboring colors.<\/p>\n\n\n\n<h3 class=\"wp-block-heading\" id=\"section-1-detail-1\">Checklist for a varied range<\/h3>\n\n\n\n<ul class=\"wp-block-list\">\n<li>Choose bases that differ in lightness by clearly visible steps, then check that adjacent bases also differ in hue lean.<\/li>\n\n\n\n<li>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.<\/li>\n\n\n\n<li>Include warm, cool, neutral and olive leanings at more than one lightness.<\/li>\n\n\n\n<li>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.<\/li>\n\n\n\n<li>Leave room to add more later without renaming the existing ones.<\/li>\n\n\n<\/ul>\n\n\n<div class=\"wp-block-image post_content_image\">\n<figure class=\"aligncenter size-large\"><img loading=\"lazy\" decoding=\"async\" width=\"1024\" height=\"768\" src=\"https:\/\/66colorful.com\/blog\/wp-content\/uploads\/2026\/10\/hex-color-code-for-skin-tone-image-3-551-3-a87209dc99d6f4d6-1024x768.jpg\" alt=\"Illustrator sampling a small area of a reference photo on a monitor\" class=\"wp-image-636\" srcset=\"https:\/\/66colorful.com\/blog\/wp-content\/uploads\/2026\/10\/hex-color-code-for-skin-tone-image-3-551-3-a87209dc99d6f4d6-1024x768.jpg 1024w, https:\/\/66colorful.com\/blog\/wp-content\/uploads\/2026\/10\/hex-color-code-for-skin-tone-image-3-551-3-a87209dc99d6f4d6-300x225.jpg 300w, https:\/\/66colorful.com\/blog\/wp-content\/uploads\/2026\/10\/hex-color-code-for-skin-tone-image-3-551-3-a87209dc99d6f4d6-768x576.jpg 768w, https:\/\/66colorful.com\/blog\/wp-content\/uploads\/2026\/10\/hex-color-code-for-skin-tone-image-3-551-3-a87209dc99d6f4d6.jpg 1200w\" sizes=\"auto, (max-width: 1024px) 100vw, 1024px\" \/><\/figure>\n<\/div>\n\n\n<h2 class=\"wp-block-heading\" id=\"how-do-i-sample-a-hex-color-code-for-skin-tone-from-a-reference-photo-3\">How do I sample a hex color code for skin tone from a reference photo?<\/h2>\n\n\n\n<p class=\"wp-block-paragraph\">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&#8217;s intrinsic skin color.<\/p>\n\n\n\n<ol class=\"wp-block-list\">\n<li><strong>Pick a clean reference.<\/strong> Avoid heavy filters, strong color casts and mixed lighting.<\/li>\n\n\n\n<li><strong>Open the <a href=\"https:\/\/66colorful.com\/tools\/image-color-picker\" title=\"Image Color Picker\">Image Color Picker<\/a>.<\/strong> Its page documents pixel picking, adjustable sample averaging and HEX export, so averaging a small area is safer than trusting one noisy pixel.<\/li>\n\n\n\n<li><strong>Sample several areas.<\/strong> Take readings from places such as the forehead, cheek and jaw, and skip glare, deep shadow and edges where hair or clothing bleeds in.<\/li>\n\n\n\n<li><strong>Compare your readings.<\/strong> Record the middle values as your base and treat bright and dark outliers as highlight and shadow clues.<\/li>\n\n\n\n<li><strong>Explore with <a href=\"https:\/\/66colorful.com\/tools\/palette-from-image\" title=\"Palette From Image\">Palette From Image<\/a>.<\/strong> It extracts dominant color clusters and currently lets you choose 3 to 12 swatches. Review the output by hand.<\/li>\n\n\n<\/ol>\n\n\n\n<p class=\"wp-block-paragraph\">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 <a href=\"https:\/\/66colorful.com\/blog\/how-to-sample-a-brand-color-from-a-logo-image\/\" title=\"How To Sample A Brand Color From A Logo Image\">sampling a brand color from a logo image<\/a>. Finally, do not infer a person&#8217;s identity from a sampled value, and do not assign anyone to a category because of a number.<\/p>\n\n\n\n<h2 class=\"wp-block-heading\" id=\"how-do-i-build-highlight-midtone-and-shadow-steps-4\">How do I build highlight, midtone and shadow steps?<\/h2>\n\n\n\n<p class=\"wp-block-paragraph\">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 <a href=\"https:\/\/66colorful.com\/tools\" title=\"Tools\">tool directory<\/a> lists a Color Tint &amp; Shade Scale Generator for this, and the <a href=\"https:\/\/66colorful.com\/compare\/tint-vs-shade\" title=\"Tint Vs Shade\">tint vs shade comparison<\/a> explains why tints add white and shades add black.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">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&#8217;s steps may differ slightly.<\/p>\n\n\n\n<figure class=\"wp-block-table\"><table class=\"has-fixed-layout\"><thead><tr><th>Step<\/th><th>Method<\/th><th>Hex<\/th><\/tr><\/thead><tbody><tr><td>Highlight<\/td><td>20% toward white<\/td><td><a class=\"cf-color-chip cf-color-chip--link\" rel=\"nofollow\" href=\"https:\/\/66colorful.com\/color\/edc6a9\" title=\"View the #EDC6A9 color page\" style=\"--cf-chip-color:#edc6a9;\"><span class=\"cf-color-chip__swatch\" aria-hidden=\"true\"><\/span><span class=\"cf-color-chip__label\">#EDC6A9<\/span><\/a><\/td><\/tr><tr><td>Midtone (illustrative base)<\/td><td>Starting swatch<\/td><td><a class=\"cf-color-chip cf-color-chip--link\" rel=\"nofollow\" href=\"https:\/\/66colorful.com\/color\/e8b894\" title=\"View the #E8B894 color page\" style=\"--cf-chip-color:#e8b894;\"><span class=\"cf-color-chip__swatch\" aria-hidden=\"true\"><\/span><span class=\"cf-color-chip__label\">#E8B894<\/span><\/a><\/td><\/tr><tr><td>Shadow<\/td><td>20% toward black<\/td><td><a class=\"cf-color-chip cf-color-chip--link\" rel=\"nofollow\" href=\"https:\/\/66colorful.com\/color\/ba9376\" title=\"View the #BA9376 color page\" style=\"--cf-chip-color:#ba9376;\"><span class=\"cf-color-chip__swatch\" aria-hidden=\"true\"><\/span><span class=\"cf-color-chip__label\">#BA9376<\/span><\/a><\/td><\/tr><\/tbody><\/table><\/figure>\n\n\n\n<p class=\"wp-block-paragraph\">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 <a href=\"https:\/\/66colorful.com\/blog\/hex-to-oklch-and-back-css-colors\/\" title=\"Hex to OKLCH and Back: Converting Colors for Modern CSS Without Surprises\">hex to OKLCH and back<\/a>.<\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li>Keep the same number of steps for every base so the set stays consistent.<\/li>\n\n\n\n<li>Shift hue slightly in shadows if the reference does, instead of only darkening.<\/li>\n\n\n\n<li>Do not present generated steps as realistic skin shading. They are an editing aid.<\/li>\n\n\n<\/ul>\n\n\n\n<h2 class=\"wp-block-heading\" id=\"how-do-i-test-skin-tone-swatches-in-avatars-and-ui-5\">How do I test skin tone swatches in avatars and UI?<\/h2>\n\n\n\n<p class=\"wp-block-paragraph\">Swatches that look good on a blank canvas can fail in a product. Test each tone in its real context before you approve it.<\/p>\n\n\n\n<h3 class=\"wp-block-heading\" id=\"section-4-detail-1\">Context checks<\/h3>\n\n\n\n<ul class=\"wp-block-list\">\n<li>Place every tone on your actual light and dark backgrounds, not only on white.<\/li>\n\n\n\n<li>View avatars at the smallest size they will appear and check whether the silhouette and outline still read.<\/li>\n\n\n\n<li>Run the set through the <a href=\"https:\/\/66colorful.com\/tools\/color-blindness-simulator\" title=\"Color Blindness Simulator\">Color Blindness Simulator<\/a>, which documents image and palette previews for several color-vision simulations. Treat it as a review aid, not proof of universal accessibility.<\/li>\n\n\n\n<li>Do a <a href=\"https:\/\/66colorful.com\/blog\/convert-color-image-to-black-and-white-design\/\" title=\"Convert Color Image To Black And White Design\">black and white check<\/a> to see whether two tones collapse into the same gray.<\/li>\n\n\n<\/ul>\n\n\n\n<h3 class=\"wp-block-heading\" id=\"section-4-detail-2\">Accessibility checks<\/h3>\n\n\n\n<p class=\"wp-block-paragraph\">Keep representation and accessibility separate. Passing contrast does not make a palette culturally representative, and a representative palette does not automatically pass contrast.<\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li>Under <a href=\"https:\/\/www.w3.org\/WAI\/WCAG22\/Understanding\/use-of-color\" title=\"Understanding Success Criterion 1.4.1: Use of Color | WAI | W3C\" target=\"_blank\" rel=\"noopener\">WCAG 2.2 Use of Color (1.4.1)<\/a>, color must not be the only way to convey information, so add labels or shapes in avatar pickers.<\/li>\n\n\n\n<li>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 <a href=\"https:\/\/66colorful.com\/tools\/contrast-checker\" title=\"Contrast Checker\">Contrast Checker<\/a> can measure a specific pair.<\/li>\n\n\n\n<li>For an outline, icon or other graphic needed to understand content, <a href=\"https:\/\/www.w3.org\/WAI\/WCAG22\/Understanding\/non-text-contrast\" title=\"Understanding Success Criterion 1.4.11: Non-text Contrast | WAI | W3C\" target=\"_blank\" rel=\"noopener\">Non-text Contrast (1.4.11, AA)<\/a> generally expects 3:1 against adjacent colors, with exceptions. Decorative illustration does not automatically need every internal shade to reach 3:1.<\/li>\n\n\n<\/ul>\n\n\n\n<p class=\"wp-block-paragraph\">For a wider routine, see <a href=\"https:\/\/66colorful.com\/blog\/designing-for-color-blindness\/\" title=\"Designing For Color Blindness\">designing for color blindness<\/a>, which covers a full accessible palette workflow.<\/p>\n\n\n\n<h2 class=\"wp-block-heading\" id=\"how-many-skin-tones-are-enough-and-how-do-i-document-them-6\">How many skin tones are enough, and how do I document them?<\/h2>\n\n\n\n<p class=\"wp-block-paragraph\">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.<\/p>\n\n\n\n<h3 class=\"wp-block-heading\" id=\"section-5-detail-1\">Avatar pickers and defaults<\/h3>\n\n\n\n<ul class=\"wp-block-list\">\n<li>Avoid a single preset &#8220;normal&#8221; shade in illustrations or as an avatar default.<\/li>\n\n\n\n<li>Offer clearly labeled choices and an easy way to change the selection later.<\/li>\n\n\n\n<li>Never force someone into a supposedly exhaustive category, and never pick a tone on their behalf from a photo.<\/li>\n\n\n<\/ul>\n\n\n\n<h3 class=\"wp-block-heading\" id=\"section-5-detail-2\">Documentation checklist<\/h3>\n\n\n\n<ul class=\"wp-block-list\">\n<li>Name tokens neutrally and by order or role, not with labels that sort people. The <a href=\"https:\/\/66colorful.com\/blog\/brand-color-design-tokens-css-variables\/\" title=\"Brand Color Design Tokens Css Variables\">brand color design tokens<\/a> article shows how to structure CSS variables that scale.<\/li>\n\n\n\n<li>Record each hex value, whether it is a base, highlight or shadow, and where it came from.<\/li>\n\n\n\n<li>Note the lighting, background and display assumptions used while choosing.<\/li>\n\n\n\n<li>Store the date and reviewers so the set can be revised.<\/li>\n\n\n<\/ul>\n\n\n\n<h2 class=\"wp-block-heading\" id=\"quick-reference-for-building-a-skin-tone-range-7\">Quick reference for building a skin tone range<\/h2>\n\n\n\n<ul class=\"wp-block-list\">\n<li>Remember that a hex color code for skin tone is an illustrative sRGB swatch, not a classification.<\/li>\n\n\n\n<li>Sample from images you own or may use, averaging several clean areas.<\/li>\n\n\n\n<li>Avoid glare, deep shadow, heavy filters and color casts.<\/li>\n\n\n\n<li>Vary undertone as well as lightness across bases.<\/li>\n\n\n\n<li>Create highlight, midtone and shadow steps, then adjust them against the reference.<\/li>\n\n\n\n<li>Test on light and dark backgrounds and at small sizes.<\/li>\n\n\n\n<li>Check text and necessary graphics against WCAG 2.2 contrast thresholds.<\/li>\n\n\n\n<li>Run a color-vision simulation and a grayscale check, and add labels or shapes.<\/li>\n\n\n\n<li>Choose the number of tones from your audience, not from a fixed rule.<\/li>\n\n\n\n<li>Document sources, roles and assumptions, and keep the range expandable.<\/li>\n\n\n<\/ul>\n\n\n\n<h2 class=\"wp-block-heading\" id=\"frequently-asked-questions\">Frequently asked questions<\/h2>\n\n\n\n<h3 class=\"wp-block-heading\" id=\"faq-1\">What is a skin color hex code?<\/h3>\n\n\n\n<p class=\"wp-block-paragraph\">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.<\/p>\n\n\n\n<h3 class=\"wp-block-heading\" id=\"faq-2\">Is there a human skin color hex code I can use as a default?<\/h3>\n\n\n\n<p class=\"wp-block-paragraph\">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.<\/p>\n\n\n\n<h3 class=\"wp-block-heading\" id=\"faq-3\">What hex code for skin color should I start with for an avatar?<\/h3>\n\n\n\n<p class=\"wp-block-paragraph\">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 <a class=\"cf-color-chip cf-color-chip--link\" rel=\"nofollow\" href=\"https:\/\/66colorful.com\/color\/e8b894\" title=\"View the #E8B894 color page\" style=\"--cf-chip-color:#e8b894;\"><span class=\"cf-color-chip__swatch\" aria-hidden=\"true\"><\/span><span class=\"cf-color-chip__label\">#E8B894<\/span><\/a> is only an illustrative starting swatch, not a recommended or typical value.<\/p>\n\n\n\n<h3 class=\"wp-block-heading\" id=\"faq-4\">How many skin tones should an avatar set include?<\/h3>\n\n\n\n<p class=\"wp-block-paragraph\">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.<\/p>\n\n\n\n<h3 class=\"wp-block-heading\" id=\"faq-5\">Can I sample skin color from a photo of someone?<\/h3>\n\n\n\n<p class=\"wp-block-paragraph\">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.<\/p>\n\n\n\n<h3 class=\"wp-block-heading\" id=\"faq-6\">Why do my skin tones look different on another screen?<\/h3>\n\n\n\n<p class=\"wp-block-paragraph\">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.<\/p>\n\n\n\n<h3 class=\"wp-block-heading\" id=\"faq-7\">Does passing contrast mean my skin tone palette is representative?<\/h3>\n\n\n\n<p class=\"wp-block-paragraph\">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.<\/p>\n\n\n\n<h2 class=\"wp-block-heading\" id=\"next-steps\">Next steps<\/h2>\n\n\n\n<p class=\"wp-block-paragraph\">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.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\"><strong>Related tools &amp; resources on 66Colorful:<\/strong><\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li><a href=\"https:\/\/66colorful.com\/tools\/image-color-picker\">Image Color Picker<\/a><\/li>\n\n\n\n<li><a href=\"https:\/\/66colorful.com\/tools\/palette-from-image\">Palette From Image<\/a><\/li>\n\n\n\n<li><a href=\"https:\/\/66colorful.com\/tools\/color-blindness-simulator\">Color Blindness Simulator<\/a><\/li>\n\n\n\n<li><a href=\"https:\/\/66colorful.com\/tools\/contrast-checker\">Contrast Checker<\/a><\/li>\n\n\n\n<li><a href=\"https:\/\/66colorful.com\/blog\/designing-for-color-blindness\/\">Designing For Color Blindness<\/a><\/li>\n\n\n\n<li><a href=\"https:\/\/66colorful.com\/tools\">Tools<\/a><\/li>\n\n\n<\/ul>\n\n\n\n<h2 class=\"wp-block-heading\" id=\"sources\">Sources and further reading<\/h2>\n\n\n\n<ul class=\"wp-block-list\">\n<li><a href=\"https:\/\/www.w3.org\/WAI\/WCAG22\/quickref\/\" target=\"_blank\" rel=\"noopener\">How to Meet WCAG (Quickref Reference)<\/a><\/li>\n\n\n\n<li><a href=\"https:\/\/www.w3.org\/WAI\/WCAG22\/Understanding\/non-text-contrast\" target=\"_blank\" rel=\"noopener\">Understanding Success Criterion 1.4.11: Non-text Contrast | WAI | W3C<\/a><\/li>\n\n\n\n<li><a href=\"https:\/\/66colorful.com\/tools\/color-blindness-simulator\">Color Blindness Simulator<\/a><\/li>\n\n\n\n<li><a href=\"https:\/\/www.w3.org\/WAI\/WCAG22\/Understanding\/use-of-color\" target=\"_blank\" rel=\"noopener\">Understanding Success Criterion 1.4.1: Use of Color | WAI | W3C<\/a><\/li>\n\n\n\n<li><a href=\"https:\/\/66colorful.com\/tools\">Tools<\/a><\/li>\n\n\n\n<li><a href=\"https:\/\/www.w3.org\/TR\/2026\/CRD-css-color-4-20261008\/\" target=\"_blank\" rel=\"noopener\">CSS Color Module Level 4<\/a><\/li>\n\n\n<\/ul>\n\n\n","protected":false},"excerpt":{"rendered":"<p>A hex color code for skin tone does not exist as one value. Learn to sample photos, build lightness and undertone steps and test your swatches.<\/p>\n","protected":false},"author":1,"featured_media":630,"comment_status":"closed","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[43],"tags":[246,278,212,37,277,66,52],"class_list":["post-629","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-color-tools","tag-avatar-design","tag-color-sampling","tag-illustration-color","tag-inclusive-design","tag-skin-tone-colors","tag-tints-and-shades","tag-ui-design"],"_links":{"self":[{"href":"https:\/\/66colorful.com\/blog\/wp-json\/wp\/v2\/posts\/629","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/66colorful.com\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/66colorful.com\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/66colorful.com\/blog\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/66colorful.com\/blog\/wp-json\/wp\/v2\/comments?post=629"}],"version-history":[{"count":4,"href":"https:\/\/66colorful.com\/blog\/wp-json\/wp\/v2\/posts\/629\/revisions"}],"predecessor-version":[{"id":637,"href":"https:\/\/66colorful.com\/blog\/wp-json\/wp\/v2\/posts\/629\/revisions\/637"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/66colorful.com\/blog\/wp-json\/wp\/v2\/media\/630"}],"wp:attachment":[{"href":"https:\/\/66colorful.com\/blog\/wp-json\/wp\/v2\/media?parent=629"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/66colorful.com\/blog\/wp-json\/wp\/v2\/categories?post=629"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/66colorful.com\/blog\/wp-json\/wp\/v2\/tags?post=629"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}