Skin Tone Color Palette: Complete Guide for Inclusive Design
A comprehensive palette of human skin tones with accurate HEX codes. Perfect for creating inclusive designs that represent the beautiful diversity of humanity.
Why Inclusive Skin Tone Palettes Matter
Representation matters in design. Whether you're creating character art, developing inclusive avatars, formulating cosmetics, or designing medical illustrations, having accurate skin tone colors ensures your work resonates with diverse audiences.
This palette is based on the Fitzpatrick Scale, the dermatological standard for classifying human skin types by their reaction to UV light. It's the most scientifically accurate way to represent the full spectrum of human skin colors.
Design Use Cases
- Character design and game development
- Makeup and foundation shade matching
- UI/UX avatar and profile picture design
- Medical and educational illustrations
Complete Skin Tone Palette (Fitzpatrick Scale)
Six scientifically accurate skin tone colors covering the full spectrum of human diversity.
Porcelain / Very Fair
Type ILightest skin tone, always burns, never tans
Fair / Light
Type IIFair skin, burns easily, tans minimally
Light Medium
Type IIILight to medium skin, sometimes burns, tans gradually
Medium / Olive
Type IVMedium to olive skin, rarely burns, tans easily
Medium Brown
Type VBrown skin, very rarely burns, tans very easily
Dark Brown / Deep
Type VIDarkest skin, never burns, deeply pigmented
Extended Skin Tone Spectrum
For more nuanced representation, here's an expanded range with intermediate shades:
Complementary Colors for Skin Tones
These complementary colors work beautifully with skin tones for makeup, fashion, and design projects:
Warm Blush
Cheek color, warmth
Natural Lip
Lip tones, natural beauty
Soft Highlight
Highlighter, glow
Dark Contour
Contour, depth
Best Practices for Skin Tone Design
Representation Diversity
Always include a range of skin tones in your designs. A good rule of thumb is to represent at least the 6 Fitzpatrick types in any character selection or avatar system.
Avoid Stereotypes
Don't associate certain skin tones with specific roles, professions, or personality traits. Let skin tone be one aspect of a character's identity, not their defining characteristic.
Test Across Contexts
Skin tones can appear differently depending on lighting, surrounding colors, and display settings. Always test your color choices in multiple contexts and environments.
Consider Undertones
Real skin tones have cool, warm, or neutral undertones. For realistic representation, consider layering subtle pink, yellow, or blue hues beneath your base skin tone colors.
CSS Skin Tone Gradient Code
Copy and paste these CSS gradients to achieve natural skin tone effects for inclusive design:
Natural Skin Tone Gradient (Light to Dark)
background: linear-gradient(
90deg,
#FFE5D9 0%,
#EBC4AF 50%,
#8D5524 100%
);Medium Skin Tone Spectrum
background: linear-gradient(
135deg,
#F5D0C5 0%,
#EBC4AF 25%,
#D4A574 50%,
#C68642 75%,
#8D5524 100%
);Warm Blush Highlight Gradient
background: linear-gradient(
120deg,
#FFEFC7 0%,
#FFB6A3 50%,
#EBC4AF 100%
);Perfect for cheek color and natural warmth
Tailwind CSS Custom Config
// tailwind.config.js
module.exports = {
theme: {
extend: {
backgroundImage: {
'skin-tone-light': 'linear-gradient(90deg, #FFE5D9 0%, #EBC4AF 50%, #8D5524 100%)',
'skin-tone-medium': 'linear-gradient(135deg, #F5D0C5 0%, #D4A574 100%)',
}
}
}
}Quick Reference Table
| Name | HEX | RGB | Fitzpatrick |
|---|---|---|---|
| Porcelain / Very Fair | #FFE5D9 | rgb(255, 229, 217) | Type I |
| Fair / Light | #F5D0C5 | rgb(245, 208, 197) | Type II |
| Light Medium | #EBC4AF | rgb(235, 196, 175) | Type III |
| Medium / Olive | #D4A574 | rgb(212, 165, 116) | Type IV |
| Medium Brown | #C68642 | rgb(198, 134, 66) | Type V |
| Dark Brown / Deep | #8D5524 | rgb(141, 85, 36) | Type VI |
Explore Our Color Library
Discover our complete collection of color guides with HEX codes, palettes, and design inspiration.
Modern Aesthetics
Natural & Soft
Create More Inclusive Designs
Explore our other color palettes and tools to build designs that represent everyone.