Skin Tone Color Picker — Find Hex Codes for Foundation, Makeup and Design

Whether you are illustrating characters, designing makeup packaging, building a fashion lookbook, or creating inclusive product imagery, you need accurate digital color codes for a range of skin tones. A free browser color picker lets you dial in any tone on the spectrum and copy its HEX or RGB code instantly.

Why Skin Tone Hex Codes Matter for Designers

Skin tones have historically been underrepresented in digital design workflows. Default palettes in most design tools offer a narrow range of options, and stock imagery often defaults to lighter tones. Getting precise codes for a wide range of skin tones matters for:

• Character illustration — matching specific tones across multiple characters or scenes
• Beauty and cosmetics design — packaging, shade range swatches, foundation match guides
• Inclusive UI design — avatar systems, user profile icons, emoji-adjacent assets
• Apparel and fashion — nude tones for lingerie, hosiery, and accessories that span the full range of human skin

Reference Ranges for Common Skin Tones

Skin tones span a wide range of hues — from pinkish-fair to deep brown and blue-black. Here are approximate HEX ranges to orient you when picking:

Tone Range	Approximate HEX Examples
Very fair / porcelain	#FDDBB4, #FFE4C4, #F5CBA7
Light / ivory	#EDB98A, #D4956A, #C68642
Medium / tan	#B5651D, #A0522D, #8B4513
Olive / golden	#9B7C5D, #7D5A3C, #6B4226
Deep / dark brown	#5C3317, #4A2912, #3D1C0B

These are starting points. Use the color picker wheel to land on the exact tone you need — every individual is unique and the full range of human skin tones spans thousands of distinct shades.

Sell Custom Apparel — We Handle Printing & Free Shipping

How to Use the Color Picker to Find Skin Tone Codes

1. Open the free color picker in your browser.
2. In the color wheel, navigate toward the orange-brown region — most skin tones live in the warm orange to brown spectrum.
3. Use the lightness slider to adjust how fair or deep the tone is.
4. Reduce saturation slightly for more natural-looking tones — fully saturated orange is not a skin tone.
5. Copy the HEX or RGB output and paste it into your design tool.

For precise illustration work, test your chosen color against neutral gray and white backgrounds to see how it reads at different scales.

Using Skin Tone Codes in Makeup and Cosmetics Design

Cosmetics brands use digital skin tone codes for:

• Foundation shade range swatches on e-commerce product pages
• Virtual try-on apps that overlay makeup colors onto user photos
• Packaging design where the product shade needs to appear on a printed box or insert
• Color-matching guides that help customers identify their shade

For print applications, keep in mind that HEX and RGB are screen color formats. You will need to convert to CMYK for accurate print reproduction — a color conversion tool or your print software can handle that step.

Frequently Asked Questions

Can I pick a skin tone from a photo?

This tool is a color wheel selector, not an image color extractor. To sample a skin tone from a specific photo or reference image, you would need a tool that reads pixel values from an uploaded image. This tool is for selecting a tone visually and getting its HEX or RGB code.

What HEX code is a "neutral" skin tone for emoji or avatars?

The Fitzpatrick scale used by emoji standards defines six tone modifiers. The most commonly referenced neutral-to-medium tone is around #F4B860 to #C68642 range. The exact values vary by platform — Apple, Google, and Samsung each interpret the scale slightly differently in their emoji sets.

Do HEX skin tone codes work for print (foundation packaging)?

HEX codes are screen colors (RGB-based). For print, you need CMYK values. Use a color conversion tool to convert your HEX to CMYK, or ask your print supplier to match from a Pantone chip for the most accurate result.

Is this tool free?

Yes. No signup, no subscription, no limits.