Porcelain & Fair Color Palette
A close study of the palest end, where flat or chalky is easy to get wrong: porcelain and ivory, rosy fair, peachy fair, and just enough cool shadow to give a pale face form. Concentrated in the light range with real undertone variety, so fair skin gets the nuance a full-spectrum ramp glosses over. Pairs with the deeper sets for a complete cast of characters.
Get Paintrix free on the App Store.
Download
Hex codes
Color theory
Base
Complement
Analogous −30°
Analogous +30°
Triadic
Use it for
Code formats
CSS
:root {
--fair-skin-tones-1: #FCEFE6;
--fair-skin-tones-2: #FAE8DC;
--fair-skin-tones-3: #F7E1D3;
--fair-skin-tones-4: #F4DAC9;
--fair-skin-tones-5: #F1D2C0;
--fair-skin-tones-6: #EECBB7;
--fair-skin-tones-7: #EAC2B6;
--fair-skin-tones-8: #E5B8AB;
--fair-skin-tones-9: #DFAEA0;
--fair-skin-tones-10: #D8A496;
--fair-skin-tones-11: #D19A8B;
--fair-skin-tones-12: #C99081;
--fair-skin-tones-13: #EBC6A8;
--fair-skin-tones-14: #E6BB98;
--fair-skin-tones-15: #DFAF88;
--fair-skin-tones-16: #D7A37A;
--fair-skin-tones-17: #CE976C;
--fair-skin-tones-18: #C48B60;
--fair-skin-tones-19: #BD8B86;
--fair-skin-tones-20: #B07F7A;
--fair-skin-tones-21: #A3736E;
--fair-skin-tones-22: #956863;
--fair-skin-tones-23: #875D58;
--fair-skin-tones-24: #79524E;
--fair-skin-tones-25: #6E4843;
--fair-skin-tones-26: #623F3A;
--fair-skin-tones-27: #563731;
--fair-skin-tones-28: #4A2F2A;
--fair-skin-tones-29: #3F2823;
--fair-skin-tones-30: #34211D;
}SCSS
$fair-skin-tones-1: #FCEFE6;
$fair-skin-tones-2: #FAE8DC;
$fair-skin-tones-3: #F7E1D3;
$fair-skin-tones-4: #F4DAC9;
$fair-skin-tones-5: #F1D2C0;
$fair-skin-tones-6: #EECBB7;
$fair-skin-tones-7: #EAC2B6;
$fair-skin-tones-8: #E5B8AB;
$fair-skin-tones-9: #DFAEA0;
$fair-skin-tones-10: #D8A496;
$fair-skin-tones-11: #D19A8B;
$fair-skin-tones-12: #C99081;
$fair-skin-tones-13: #EBC6A8;
$fair-skin-tones-14: #E6BB98;
$fair-skin-tones-15: #DFAF88;
$fair-skin-tones-16: #D7A37A;
$fair-skin-tones-17: #CE976C;
$fair-skin-tones-18: #C48B60;
$fair-skin-tones-19: #BD8B86;
$fair-skin-tones-20: #B07F7A;
$fair-skin-tones-21: #A3736E;
$fair-skin-tones-22: #956863;
$fair-skin-tones-23: #875D58;
$fair-skin-tones-24: #79524E;
$fair-skin-tones-25: #6E4843;
$fair-skin-tones-26: #623F3A;
$fair-skin-tones-27: #563731;
$fair-skin-tones-28: #4A2F2A;
$fair-skin-tones-29: #3F2823;
$fair-skin-tones-30: #34211D;Tailwind
// tailwind.config.js
module.exports = {
theme: {
extend: {
colors: {
'fair-skin-tones': {
'1': '#FCEFE6',
'2': '#FAE8DC',
'3': '#F7E1D3',
'4': '#F4DAC9',
'5': '#F1D2C0',
'6': '#EECBB7',
'7': '#EAC2B6',
'8': '#E5B8AB',
'9': '#DFAEA0',
'10': '#D8A496',
'11': '#D19A8B',
'12': '#C99081',
'13': '#EBC6A8',
'14': '#E6BB98',
'15': '#DFAF88',
'16': '#D7A37A',
'17': '#CE976C',
'18': '#C48B60',
'19': '#BD8B86',
'20': '#B07F7A',
'21': '#A3736E',
'22': '#956863',
'23': '#875D58',
'24': '#79524E',
'25': '#6E4843',
'26': '#623F3A',
'27': '#563731',
'28': '#4A2F2A',
'29': '#3F2823',
'30': '#34211D',
},
},
},
},
};JSON
{
"name": "Porcelain & Fair",
"colors": [
"#FCEFE6",
"#FAE8DC",
"#F7E1D3",
"#F4DAC9",
"#F1D2C0",
"#EECBB7",
"#EAC2B6",
"#E5B8AB",
"#DFAEA0",
"#D8A496",
"#D19A8B",
"#C99081",
"#EBC6A8",
"#E6BB98",
"#DFAF88",
"#D7A37A",
"#CE976C",
"#C48B60",
"#BD8B86",
"#B07F7A",
"#A3736E",
"#956863",
"#875D58",
"#79524E",
"#6E4843",
"#623F3A",
"#563731",
"#4A2F2A",
"#3F2823",
"#34211D"
]
}Hex list
#FCEFE6
#FAE8DC
#F7E1D3
#F4DAC9
#F1D2C0
#EECBB7
#EAC2B6
#E5B8AB
#DFAEA0
#D8A496
#D19A8B
#C99081
#EBC6A8
#E6BB98
#DFAF88
#D7A37A
#CE976C
#C48B60
#BD8B86
#B07F7A
#A3736E
#956863
#875D58
#79524E
#6E4843
#623F3A
#563731
#4A2F2A
#3F2823
#34211D